/* ===== 手机端适配（前台） =====
* 仅当 被 js/device.js 标记为 .device-mobile 时生效。
* 全部规则以 .device-mobile 为前缀，PC 端（device-pc）完全不受影响。
*/
/* 全局：更紧凑的留白与基础字号 */
.device-mobile body {
font-size: 14px;
}
.device-mobile .container {
padding: 0 12px;
}
/* ===== 导航栏：品牌缩小，导航项横向滚动 ===== */
.device-mobile .navbar-inner {
padding: 0 12px;
height: 52px;
gap: 6px;
flex-wrap: nowrap;
}
.device-mobile .navbar-brand {
font-size: 16px;
min-width: 0;
max-width: 42vw;
flex-shrink: 1;
overflow: hidden;
white-space: nowrap;
}
/* 学校名：超长时省略号截断，禁止换行竖排、禁止挤压导航项 */
.device-mobile .navbar-brand #navTitle {
display: inline-block;
vertical-align: middle;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Logo 略微缩小，为导航项腾出空间 */
.device-mobile .navbar-brand img {
height: 24px !important;
width: auto;
}
.device-mobile .navbar-nav {
/* min-width:0 是关键：允许导航区收缩，超宽时在内部横向滚动 */
min-width: 0;
flex: 1 1 auto;
/* flex-start：超宽时内容向右侧溢出（自然横向滚动），
保证左侧"报名/状态"等入口始终可见可点；flex-end 会导致左侧被裁掉 */
justify-content: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
scrollbar-width: none;
gap: 2px;
}
.device-mobile .navbar-nav::-webkit-scrollbar {
display: none;
}
.device-mobile .nav-link {
padding: 8px 10px;
font-size: 13px;
white-space: nowrap;
flex-shrink: 0;
}
/* ===== 卡片：缩小内边距，减少留白浪费 ===== */
.device-mobile .card {
padding: 16px;
border-radius: 10px;
}
.device-mobile .card-header {
margin-bottom: 14px;
padding-bottom: 12px;
}
.device-mobile .card-title {
font-size: 16px;
}
/* ===== 表单：输入区两列改单列、字号放大防 iOS 聚焦缩放 ===== */
.device-mobile .form-row {
flex-direction: column;
gap: 0;
}
.device-mobile .form-control {
font-size: 16px;
padding: 10px 12px;
}
.device-mobile select.form-control,
.device-mobile textarea.form-control {
font-size: 16px;
}
/* 验证码一行的手机/邮箱下拉框：不再固定 160px，改为弹性平分 */
.device-mobile #regVerifyTarget {
width: auto !important;
flex: 1;
min-width: 0;
}
/* 登录/注册页：顶部边距收敛（原内联 margin:60px auto） */
.device-mobile #authPage {
margin: 24px auto !important;
}
/* 登录/注册 Tab：等分整行，更易点按 */
.device-mobile .tabs {
flex-wrap: nowrap;
}
.device-mobile .tab {
flex: 1;
text-align: center;
padding: 12px 8px;
font-size: 15px;
}
/* ===== 按钮：主要操作全宽、触控高度提升 ===== */
.device-mobile .btn {
min-height: 44px;
}
.device-mobile .btn-lg {
width: 100%;
min-height: 48px;
font-size: 16px;
}
/* 步骤条底部“上一步/下一步”按钮行：两钮各占半行并排 */
.device-mobile .card div[style*="space-between"] {
flex-wrap: wrap;
gap: 8px;
}
.device-mobile .card div[style*="space-between"] .btn {
flex: 1 1 45%;
min-width: 0;
}
/* ===== 步骤条：紧凑化 + 允许横向滚动 ===== */
.device-mobile .progress-steps {
margin: 16px 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
.device-mobile .progress-steps::-webkit-scrollbar {
display: none;
}
.device-mobile .progress-step {
flex-shrink: 0;
gap: 6px;
}
.device-mobile .progress-step .step-circle {
width: 26px;
height: 26px;
font-size: 12px;
}
/* 标签强制单行：禁止被压缩成"单字一列"，超宽时由容器横向滚动 */
.device-mobile .progress-step .step-label {
font-size: 12px;
white-space: nowrap;
flex-shrink: 0;
}
.device-mobile .progress-line {
min-width: 16px;
}
/* ===== 弹窗：手机端全屏化，便于阅读与操作 ===== */
.device-mobile .modal {
width: 100%;
max-width: 100% !important;
height: 100%;
max-height: 100% !important;
border-radius: 0;
}
.device-mobile .modal-header {
padding: 14px 16px;
}
.device-mobile .modal-body {
padding: 16px;
}
.device-mobile .modal-footer {
padding: 12px 16px;
}
/* ===== Toast：顶部居中、全宽显示，避开刘海屏左右遮挡 ===== */
.device-mobile .toast-container {
left: 12px;
right: 12px;
top: 12px;
}
.device-mobile .toast {
max-width: 100%;
text-align: center;
}
/* ===== 材料上传：点击区高度提升，方便手指操作 ===== */
.device-mobile .upload-area {
padding: 18px 12px;
}
.device-mobile .upload-area .upload-icon {
font-size: 26px;
}
/* ===== 信息表格：去掉单元格横向拥挤感 ===== */
.device-mobile .data-table,
.device-mobile .table {
font-size: 13px;
}
.device-mobile .data-table th,
.device-mobile .data-table td {
padding: 8px 10px;
}
/* ===== 分页按钮：触控友好 ===== */
.device-mobile .pagination .page-item {
padding: 10px 16px;
font-size: 14px;
}
/* ===== 导航栏（手机端）：横向链接折叠为下拉框 =====
* 原 .navbar-nav 中的链接（欢迎/报名/状态/结果/缴费/个人信息/退出）在窄屏会被挤压/竖排。
* 这里在移动端隐藏原导航，由 js/mobile-nav.js 注入一个紧凑的