/* ===== 设备端适配（前台） =====
 * 按 js/device.js 在 <html> 上打的设备类生效：
 *   .device-mobile  手机端（原移动适配，全部规则保持此前缀）
 *   .device-tablet  平板端（介于手机与桌面之间：继承桌面布局 + 触控优化 + 锁定桌面导航）
 *   .device-mac     Mac 端（系统级细节：字体渲染 / Safari 滚动条 / 动量滚动 / 安全区）
 * 电脑端(.device-pc) 走 css/style.css 桌面布局，本文件不干预。
 */

/* 全局：更紧凑的留白与基础字号 */
.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;
}

/* 2026-08-26 改版：移动端隐藏欢迎语（导航横向滚动空间紧张，品牌+菜单优先） */
.device-mobile .nav-user { display: none; }

/* 学校名：超长时省略号截断，禁止换行竖排、禁止挤压导航项 */
.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 注入一个紧凑的 <select>。
 * PC 端完全不受影响（mobile-nav.js 仅在 .device-mobile 下生效）。
 */
.device-mobile .navbar-nav { display: none !important; }

.device-mobile .navbar-inner {
    /* 品牌 + 下拉框两端对齐：下拉框在剩余空间内弹性伸缩 */
    gap: 8px;
}

.device-mobile .mobile-nav-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 60vw;
    height: 36px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background-color: var(--gray-50);
    color: var(--gray-700);
    font-size: 14px;
    font-weight: 500;
    /* 自绘下拉箭头，避免不同移动浏览器原生箭头差异 */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%236b7280' d='M6 8L2 4h8z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    cursor: pointer;
}

.device-mobile .mobile-nav-select:focus {
    outline: none;
    border-color: var(--primary);
    background-color: #fff;
}

/* 当前选中项高亮（与 .nav-link.active 视觉对齐） */
.device-mobile .mobile-nav-select.has-active {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
    background-color: var(--primary-light);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%234f46e5' d='M6 8L2 4h8z'/%3e%3c/svg%3e");
}

/* 退出选项文字加红（PC 端 .nav-link[onclick*=logout] 是 var(--danger)） */
.device-mobile .mobile-nav-select option[value="__logout__"] { color: var(--danger); }

/* ============================================================
 * 2026-08-26 全面移动端适配增强（实测驱动）
 * 覆盖：门户（topbar/hero）+ 学生端（步骤条/籍贯下拉）
 * 依据 375px 视口实测数据修复：
 *   - 步骤条 scrollW=440 vs clientW=319（第三步默认不可见）
 *   - 籍贯双下拉并排 312px 塞满内容区
 *   - 门户 topbar 文字与热线在窄屏截断
 *   - hero 悬浮数据卡与文字重叠错位
 * 全部为 .device-mobile 前缀新增覆盖，PC 端（device-pc）零影响。
 * ============================================================ */

/* ---- 门户：顶部通知栏（字号/高度/间距紧凑化，跑马灯保留） ---- */
.device-mobile .topbar { font-size: 12px; height: 36px; }
.device-mobile .topbar .topbar-inner { gap: 8px; padding: 0 12px; }
.device-mobile .topbar .ticker { height: 36px; line-height: 36px; }
.device-mobile .topbar .hotline { font-size: 12px; }

/* ---- 门户：Hero 悬浮数据卡（缩小并贴 hero-right 两角，避开文字） ---- */
.device-mobile .home-hero .float-card { padding: 8px 12px; border-radius: 10px; }
.device-mobile .home-hero .float-card b { font-size: 16px; }
.device-mobile .home-hero .float-card.fc1 { top: 0; left: 0; }
.device-mobile .home-hero .float-card.fc2 { bottom: 0; right: 0; }

/* ---- 门户：Hero CTA 按钮全宽堆叠（触控友好，主操作更醒目） ---- */
.device-mobile .home-hero .hero-cta { flex-direction: column; gap: 10px; align-items: stretch; }
.device-mobile .home-hero .hero-cta .btn-primary-cta,
.device-mobile .home-hero .hero-cta .btn-ghost-cta { width: 100%; text-align: center; padding: 13px 0; }

/* ---- 学生端：报名步骤条（三步一屏完整显示，不再依赖横向滚动） ----
 * 实测 375px：原 26px 圆圈+12px 字号下 scrollW=440 > clientW=319；
 * 压缩为 22px/11px 后三步总宽约 260px，完整可见（横向滚动规则保留作兜底）。 */
.device-mobile .progress-steps { margin: 14px 0; }
.device-mobile .progress-step { gap: 3px; }
.device-mobile .progress-step .step-circle { width: 20px; height: 20px; font-size: 10px; }
.device-mobile .progress-step .step-label { font-size: 10px; }
.device-mobile .progress-line { min-width: 6px; margin: 0 2px; }

/* ---- 学生端：籍贯省份/城市下拉（并排 312px 拥挤 → 单列堆叠） ----
 * 容器为内联 style 的 flex div（无类名），用属性选择器精准匹配；
 * 该内联模式全站仅籍贯一处使用（已核实），无误伤。 */
.device-mobile .form-group div[style*="display:flex"] { flex-wrap: wrap; }
.device-mobile .form-group #f_native_province,
.device-mobile .form-group #f_native_city { flex: 0 0 100% !important; max-width: 100%; }

/* ===== 2026-09-06 首页门户：导航两段式品牌区适配 ===== */
/* 移动端隐藏品牌区与菜单之间的硬分隔线和小英文（节省横向空间） */
.device-mobile .site-nav .nav-divider { display: none; }
.device-mobile .site-nav .nav-brand .brand-title { font-size: 15px; }
.device-mobile .site-nav .nav-inner { padding: 0 12px; gap: 10px; }

/* ============================================================
 * 平板端（device-tablet）：介于手机与桌面之间
 * 继承 css/style.css 桌面布局（768–1199px 媒体查询已给出双列网格/双列表单）；
 * 此处叠加：锁定桌面横向导航（绝不出现手机汉堡抽屉）、触控优化、
 * 更大触控目标、安全区内缩。布局多列网格由媒体查询负责，这里只做"端"级增强。
 * ============================================================ */

/* 1) 锁定桌面导航：平板始终显示横向菜单，隐藏手机汉堡与抽屉（!important 压过 <768px 媒体查询） */
.device-tablet .site-nav .nav-menu,
.device-tablet .site-nav .nav-actions { display: flex !important; }
.device-tablet .site-nav .nav-toggle { display: none !important; }
.device-tablet .site-nav .nav-drawer { display: none !important; }

/* 菜单项过多时允许横向滚动，避免挤压/换行 */
.device-tablet .site-nav .nav-menu {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 18px;
}
.device-tablet .site-nav .nav-menu::-webkit-scrollbar { display: none; }

/* 2) 触控优化：去点击高亮、加快响应、禁双击缩放 */
.device-tablet a,
.device-tablet button,
.device-tablet .btn,
.device-tablet input,
.device-tablet select,
.device-tablet textarea {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* 3) 更大触控目标：按钮/表单/导航/分页最小高度 44px，输入框 16px 防 iOS 聚焦放大 */
.device-tablet .btn,
.device-tablet .form-control,
.device-tablet select.form-control,
.device-tablet textarea.form-control,
.device-tablet .nav-link,
.device-tablet .pagination .page-item {
    min-height: 44px;
    font-size: 16px;
}
.device-tablet .nav-link { padding: 10px 14px; }
.device-tablet .pagination .page-item { padding: 10px 16px; }

/* 4) 安全区（刘海/圆角）：置顶/通栏元素内缩，避免被遮挡 */
.device-tablet .site-nav {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
.device-tablet .topbar {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* 5) 平板基础字号略放大，阅读更舒适；容器留白适中 */
.device-tablet body { font-size: 15px; }
.device-tablet .container { padding: 0 18px; }

/* ============================================================
 * Mac 端（device-mac）：系统级细节适配
 * macOS 与 Windows/Linux 屏宽相同、靠 UA 区分；此处针对 Safari/macOS 做：
 * 原生字体栈(San Francisco / PingFang SC)、抗锯齿、WebKit 滚动条、
 * 动量滚动兜底、毛玻璃硬件加速、安全区。
 * ============================================================ */
.device-mac,
.device-mac body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-overflow-scrolling: touch; /* Safari 动量滚动兜底 */
}

/* Safari/WebKit 滚动条美化（macOS 默认过细/隐藏，这里给一个克制可见的细滚动条） */
.device-mac ::-webkit-scrollbar { width: 10px; height: 10px; }
.device-mac ::-webkit-scrollbar-track { background: transparent; }
.device-mac ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.device-mac ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.32);
    background-clip: content-box;
}
.device-mac { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.18) transparent; }

/* 导航毛玻璃在 Safari 上更顺滑（硬件加速 + 饱和提升） */
.device-mac .site-nav.scrolled {
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
}

/* 安全区（Mac 全屏/分屏时基本为 0，保留以兼容未来 notch 设备） */
.device-mac .site-nav { padding-top: env(safe-area-inset-top, 0px); }

/* ============================================================
 * 移动 / 平板端对齐【小程序】视觉规范（仅 .device-mobile / .device-tablet 生效，桌面 PC 不变）
 * 设计令牌源自 miniprogram/app.wxss：
 *   主色 #4f46e5 / 渐变 #5b6ef5→#7c3aed / 浅主色 #eef2ff / 描边 #edf0f5
 *   危险红 #fa5151 / 成功 #52c41a / 琥珀 #f59e0b / 圆角(卡片9px·按钮6px) / 软阴影
 * 说明：style.css 全局令牌本就是靛蓝，需覆盖的是 home.html 中“硬编码的蓝色”与组件造型。
 * ============================================================ */

/* ---- 令牌微调：浅主色底 / 描边 / 危险·成功红 / 圆角，对齐小程序 ---- */
.device-mobile,
.device-tablet {
    --primary-light: #eef2ff;   /* 小程序 brand-soft */
    --border: #edf0f5;          /* 小程序 border */
    --danger: #fa5151;          /* 小程序微信红 */
    --success: #52c41a;         /* 小程序 success */
    --radius: 10px;             /* 小程序卡片圆角(18rpx≈9px)，略放大更柔和 */
    --radius-sm: 6px;           /* 小程序按钮圆角(12rpx≈6px) */
}

/* ---- 字体栈 + 页面背景对齐小程序（含 PingFang SC / Helvetica Neue） ---- */
.device-mobile body,
.device-tablet body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: #f4f6fb;        /* 小程序 --bg */
    -webkit-font-smoothing: antialiased;
}

/* ---- 顶部通告栏：深蓝 → 靛紫渐变 ---- */
.device-mobile .topbar,
.device-tablet .topbar { background: linear-gradient(90deg, #4f46e5, #7c3aed); }

/* ---- Hero 首屏：靛蓝→紫→青 渐变（保留小程序 --accent 青收尾） ---- */
.device-mobile .home-hero,
.device-tablet .home-hero { background: linear-gradient(135deg, #5b6ef5 0%, #7c3aed 55%, #0EA5E9 100%); }

/* ---- 导航：菜单激活/悬停色、下划线、注册按钮 对齐靛蓝 ---- */
.device-mobile .site-nav .nav-menu a:hover,
.device-mobile .site-nav .nav-menu a.active,
.device-tablet .site-nav .nav-menu a:hover,
.device-tablet .site-nav .nav-menu a.active { color: #4f46e5; }
.device-mobile .site-nav .nav-menu a::after,
.device-tablet .site-nav .nav-menu a::after { background: #4f46e5; }
.device-mobile .site-nav .nav-register,
.device-tablet .site-nav .nav-register { background: #4f46e5; }
.device-mobile .site-nav .nav-register:hover,
.device-tablet .site-nav .nav-register:hover { background: #4338ca; }

/* ---- Hero 主 CTA：改为小程序渐变主按钮（白字 + 主色投影），与小程序 .btn-primary 一致 ---- */
.device-mobile .home-hero .btn-primary-cta,
.device-tablet .home-hero .btn-primary-cta {
    background: linear-gradient(135deg, #5b6ef5 0%, #7c3aed 100%);
    color: #fff;
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.30);
}

/* ---- 浮动数据卡数字 / 特色图标 / 区块标题下划线：对齐靛蓝 ---- */
.device-mobile .home-hero .float-card b,
.device-tablet .home-hero .float-card b { color: #4f46e5; }
.device-mobile .feature-item .feat-icon,
.device-tablet .feature-item .feat-icon { background: linear-gradient(135deg, #5b6ef5, #7c3aed); }
.device-mobile .home-section .sec-title::after,
.device-tablet .home-section .sec-title::after { background: linear-gradient(90deg, #5b6ef5, #7c3aed); }

/* ---- 友情链接悬停 / 更多链接：对齐靛蓝 ---- */
.device-mobile .links-grid a:hover,
.device-tablet .links-grid a:hover {
    color: #fff; background: #4f46e5; border-color: #4f46e5;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
}
.device-mobile .more-link,
.device-tablet .more-link { color: #4f46e5; }

/* ---- 组件造型：更圆润、更柔和的卡片阴影，呼应小程序卡片风格 ---- */
.device-mobile .feature-item,
.device-tablet .feature-item {
    border-radius: 14px;
    border-color: #edf0f5;
    box-shadow: 0 1px 6px rgba(17, 24, 39, 0.05);
}
.device-mobile .home-section,
.device-tablet .home-section { padding: 44px 5%; }

/* ============================================================
 * 移动 / 平板端：组件级 1:1 复刻小程序首页版式
 * 仅 .device-mobile / .device-tablet 生效；桌面 PC 不变。
 * 数值由小程序 rpx 按 1rpx = 0.5px 换算。
 * ============================================================ */

/* ---- 悬浮报名条 + 小程序同款底部 tabBar（默认隐藏，移动/平板显示） ---- */
.home-action-bar, .bottom-tabbar { display: none; }

.device-mobile .home-action-bar,
.device-tablet .home-action-bar {
    display: block;
    position: fixed;
    left: 0; right: 0;
    bottom: calc(50px + env(safe-area-inset-bottom));
    padding: 0 16px 10px;
    z-index: 60;
}
.device-mobile .home-action-bar .abtn,
.device-tablet .home-action-bar .abtn {
    display: block;
    width: 100%;
    text-align: center;
    background: linear-gradient(135deg, #5b6ef5, #7c3aed);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 46px;
    border-radius: 23px;
    letter-spacing: 2px;
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.30);
    text-decoration: none;
}
.device-mobile .home-action-bar .abtn:active,
.device-tablet .home-action-bar .abtn:active { transform: scale(0.98); filter: brightness(0.96); }

.device-mobile .bottom-tabbar,
.device-tablet .bottom-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(50px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid #eef0f4;
    box-shadow: 0 -3px 12px rgba(17, 24, 39, 0.06);
    z-index: 61;
}
.device-mobile .bottom-tabbar .titem,
.device-tablet .bottom-tabbar .titem {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9aa1ab;
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease;
}
.device-mobile .bottom-tabbar .titem.active,
.device-tablet .bottom-tabbar .titem.active { color: #4f46e5; }
.device-mobile .bottom-tabbar .ticon,
.device-tablet .bottom-tabbar .ticon { font-size: 21px; line-height: 1; margin-bottom: 2px; transition: transform 0.2s ease; }
.device-mobile .bottom-tabbar .titem.active .ticon,
.device-tablet .bottom-tabbar .titem.active .ticon { transform: translateY(-2px) scale(1.08); }
.device-mobile .bottom-tabbar .ttext,
.device-tablet .bottom-tabbar .ttext { font-size: 11px; font-weight: 500; letter-spacing: 1px; }
.device-mobile .bottom-tabbar .titem.active::after,
.device-tablet .bottom-tabbar .titem.active::after {
    content: '';
    position: absolute;
    top: 6px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4f46e5;
    opacity: 0.85;
}

/* 移动/平板：内容底部留白，避免被悬浮报名条 + tabBar 遮挡 */
.device-mobile body,
.device-tablet body { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }

/* 移动/平板：顶部导航改为干净白色条，与小程序 App 风一致且保证可读性 */
.device-mobile .site-nav,
.device-tablet .site-nav {
    background: #fff !important;
    box-shadow: 0 1px 6px rgba(17, 24, 39, 0.06);
    position: sticky;
    top: 0;
    z-index: 50;
}
.device-mobile .site-nav .brand-title,
.device-tablet .site-nav .brand-title { color: #1f2937; }
.device-mobile .site-nav .nav-toggle span,
.device-tablet .site-nav .nav-toggle span { background: #1f2937; }

/* ---- 顶部通告栏（对齐小程序 .topbar） ---- */
.device-mobile .topbar,
.device-tablet .topbar {
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    color: #fff;
    font-size: 11.5px;
    padding: 6px 12px;
    min-height: 29px;
}
.device-mobile .topbar .hotline,
.device-tablet .topbar .hotline { color: #fbbf24; font-weight: 600; }

/* ---- 通用区块卡片（对齐小程序 .section） ---- */
.device-mobile .home-section,
.device-tablet .home-section {
    background: #fff;
    margin: 11px 12px;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 14px rgba(31, 41, 55, 0.06);
}
.device-mobile .home-section.bg-soft,
.device-mobile .home-section.bg-gray,
.device-tablet .home-section.bg-soft,
.device-tablet .home-section.bg-gray { background: #fff; }

/* 区块标题（对齐小程序 .section-title：左竖条 + 粗体，去掉旧下划线） */
.device-mobile .sec-title,
.device-tablet .sec-title {
    position: relative;
    font-size: 15.5px;
    font-weight: 700;
    color: #1f2937;
    padding-left: 10px;
    margin-bottom: 11px;
    line-height: 1.3;
}
.device-mobile .sec-title::after,
.device-tablet .sec-title::after { display: none; }
.device-mobile .sec-title::before,
.device-tablet .sec-title::before {
    content: '';
    position: absolute;
    left: 0; top: 2px;
    width: 4px; height: 15px;
    background: linear-gradient(180deg, #5b6ef5, #7c3aed);
    border-radius: 3px;
}
.device-mobile .sec-header,
.device-tablet .sec-header { display: flex; align-items: center; justify-content: space-between; }
.device-mobile .more-link,
.device-tablet .more-link { font-size: 12px; color: #4f46e5; text-decoration: none; }

/* ---- Hero（对齐小程序 .hero：圆角渐变卡 + 居中 + 浮动数据卡） ---- */
.device-mobile .home-hero,
.device-tablet .home-hero {
    position: relative;
    background: linear-gradient(135deg, #5b6ef5 0%, #7c3aed 100%);
    color: #fff;
    text-align: center;
    padding: 78px 16px 28px;
    overflow: hidden;
}
.device-mobile .home-hero .hero-inner,
.device-tablet .home-hero .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 420px;
    margin: 0 auto;
}
.device-mobile .home-hero .hero-left,
.device-tablet .home-hero .hero-left { width: 100%; display: flex; flex-direction: column; align-items: center; }
.device-mobile .home-hero .hero-logo,
.device-tablet .home-hero .hero-logo {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #fff;
    margin-bottom: 11px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    object-fit: contain;
}
.device-mobile .home-hero .hero-pill,
.device-tablet .home-hero .hero-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 12px;
    padding: 3px 14px;
    border-radius: 15px;
    margin-bottom: 10px;
}
.device-mobile .home-hero h1,
.device-tablet .home-hero h1 { font-size: 21px; font-weight: 800; letter-spacing: 0.5px; text-shadow: 0 1px 6px rgba(0,0,0,0.18); margin: 0; }
.device-mobile .home-hero p,
.device-tablet .home-hero p { margin-top: 6px; font-size: 13px; opacity: 0.92; }
.device-mobile .home-hero .hero-cta,
.device-tablet .home-hero .hero-cta { margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.device-mobile .home-hero .btn-primary-cta,
.device-tablet .home-hero .btn-primary-cta {
    background: linear-gradient(135deg, #5b6ef5, #7c3aed);
    color: #fff;
    border-radius: 23px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.30);
    text-decoration: none;
}
.device-mobile .home-hero .btn-ghost-cta,
.device-tablet .home-hero .btn-ghost-cta {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 23px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.device-mobile .home-hero .hero-right,
.device-tablet .home-hero .hero-right { width: 100%; }
.device-mobile .home-hero .hero-floats,
.device-tablet .home-hero .hero-floats { display: flex; justify-content: center; flex-wrap: wrap; gap: 11px; margin-top: 20px; }
.device-mobile .home-hero .float-card,
.device-tablet .home-hero .float-card {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 9px;
    padding: 8px 15px;
    min-width: 70px;
    font-size: 12px;
}
.device-mobile .home-hero .float-card b,
.device-tablet .home-hero .float-card b { display: block; font-size: 18px; font-weight: 800; color: #fbbf24; }

/* ---- 学校简介 ---- */
.device-mobile .intro-wrap,
.device-tablet .intro-wrap { display: block; }
.device-mobile .intro-img,
.device-tablet .intro-img { width: 100%; height: 160px; border-radius: 9px; margin-bottom: 12px; background: #f3f4f6; background-size: cover; background-position: center; }
.device-mobile .intro-text,
.device-tablet .intro-text { font-size: 13.5px; color: #4b5563; line-height: 1.8; }

/* ---- 办学特色（对齐小程序 .feature-item：两列 + 圆点 + 名称/描述） ---- */
.device-mobile .feature-grid,
.device-tablet .feature-grid { display: flex; flex-wrap: wrap; }
.device-mobile .feature-item,
.device-tablet .feature-item {
    width: 50%;
    display: flex;
    align-items: flex-start;
    padding: 6px 0 6px 14px;
    font-size: 13px;
    color: #374151;
    box-sizing: border-box;
    position: relative;
}
.device-mobile .feature-item::before,
.device-tablet .feature-item::before {
    content: '';
    position: absolute;
    left: 0; top: 12px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b6ef5, #7c3aed);
}
.device-mobile .feature-item strong,
.device-tablet .feature-item strong { color: #1f2937; font-weight: 600; font-size: 13.5px; }
.device-mobile .feature-item span,
.device-tablet .feature-item span { color: #9aa1ab; font-size: 11.5px; }

/* ---- 校园风光（对齐小程序 .gallery：横向滚动 + 圆角图） ---- */
.device-mobile .gallery,
.device-tablet .gallery { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.device-mobile .gallery img,
.device-tablet .gallery img {
    width: 150px; height: 105px;
    border-radius: 8px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: top;
    background: #f3f4f6;
    object-fit: cover;
}

/* ---- 新闻 / 通知列表（对齐小程序 .list-card） ---- */
.device-mobile .home-list .row,
.device-tablet .home-list .row { display: flex; border-bottom: 1px solid #f1f2f5; padding: 9px 0; gap: 12px; }
.device-mobile .home-list .row:last-child,
.device-tablet .home-list .row:last-child { border-bottom: none; }
.device-mobile .home-list .row .cover,
.device-tablet .home-list .row .cover { width: 88px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #f3f4f6; }
.device-mobile .home-list .main,
.device-tablet .home-list .main { flex: 1; min-width: 0; }
.device-mobile .home-list .head,
.device-tablet .home-list .head { display: flex; justify-content: space-between; align-items: baseline; }
.device-mobile .home-list .t,
.device-tablet .home-list .t { font-size: 14px; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.device-mobile .home-list .d,
.device-tablet .home-list .d { font-size: 11px; color: #a3a8b0; flex-shrink: 0; }
.device-mobile .home-list .s,
.device-tablet .home-list .s { margin-top: 5px; font-size: 12px; color: #8a9099; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.device-mobile .home-list .c,
.device-tablet .home-list .c { margin-top: 5px; font-size: 12px; color: #8a9099; line-height: 1.6; }

/* ---- 专业介绍（home.js 已输出与小程序同名的 .mi-* 类） ---- */
.device-mobile .mi-group,
.device-tablet .mi-group { margin-bottom: 14px; }
.device-mobile .mi-campus,
.device-tablet .mi-campus { display: flex; align-items: center; font-size: 14px; font-weight: 700; color: #1f2937; margin-bottom: 8px; }
.device-mobile .mi-campus-bar,
.device-tablet .mi-campus-bar { width: 4px; height: 14px; background: linear-gradient(180deg, #5b6ef5, #7c3aed); border-radius: 3px; margin-right: 6px; }
.device-mobile .mi-card,
.device-tablet .mi-card { background: #f8fafc; border: 1px solid #eef0f4; border-radius: 9px; padding: 11px; margin-bottom: 9px; }
.device-mobile .mi-cover,
.device-tablet .mi-cover { width: 100%; height: 110px; border-radius: 6px; margin-bottom: 8px; background: #eef0f4; object-fit: cover; }
.device-mobile .mi-name,
.device-tablet .mi-name { font-size: 15px; font-weight: 700; color: #1f2937; }
.device-mobile .mi-meta,
.device-tablet .mi-meta { display: flex; align-items: center; margin-top: 5px; }
.device-mobile .mi-level,
.device-tablet .mi-level { background: #eef2ff; color: #4f46e5; font-size: 10.5px; padding: 2px 8px; border-radius: 10px; margin-right: 6px; }
.device-mobile .mi-dur,
.device-tablet .mi-dur { font-size: 11px; color: #9aa1ab; }
.device-mobile .mi-obj,
.device-tablet .mi-obj { margin-top: 5px; font-size: 12px; color: #4b5563; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.device-mobile .mi-courses,
.device-tablet .mi-courses { display: flex; flex-wrap: wrap; margin-top: 6px; }
.device-mobile .mi-course,
.device-tablet .mi-course { background: #e0f2fe; color: #0284c7; font-size: 10.5px; padding: 2px 8px; border-radius: 10px; margin: 0 6px 5px 0; }
.device-mobile .mi-more,
.device-tablet .mi-more { margin-top: 4px; font-size: 11.5px; color: #4f46e5; font-weight: 600; }

/* ---- 师资力量（.teacher-* 类已与小程序同名） ---- */
.device-mobile .teacher-grid,
.device-tablet .teacher-grid { display: flex; flex-wrap: wrap; justify-content: space-between; }
.device-mobile .teacher-card,
.device-tablet .teacher-card { width: 31.5%; background: #f8fafc; border: 1px solid #eef0f4; border-radius: 9px; padding: 11px 6px; margin-bottom: 9px; text-align: center; box-sizing: border-box; }
.device-mobile .teacher-avatar,
.device-tablet .teacher-avatar { width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 6px; background: #eef2ff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(79,70,229,0.18); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: #4f46e5; font-size: 20px; font-weight: 700; }
.device-mobile .teacher-name,
.device-tablet .teacher-name { font-size: 13px; font-weight: 600; color: #1f2937; }
.device-mobile .teacher-title,
.device-tablet .teacher-title { font-size: 10.5px; color: #4f46e5; margin-top: 2px; }
.device-mobile .teacher-subject,
.device-tablet .teacher-subject { font-size: 10px; color: #9aa1ab; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 招生信息 ---- */
.device-mobile .enroll-wrap,
.device-tablet .enroll-wrap { display: block; }
.device-mobile .enroll-info,
.device-tablet .enroll-info { width: 100%; }
.device-mobile .enroll-side,
.device-tablet .enroll-side { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.device-mobile .enroll-side .qr,
.device-tablet .enroll-side .qr { width: 96px; height: 96px; border-radius: 8px; background: #f3f4f6; object-fit: cover; }
.device-mobile .btn-download,
.device-tablet .btn-download { display: inline-block; background: #eef2ff; color: #4f46e5; font-size: 12px; padding: 8px 16px; border-radius: 12px; text-decoration: none; }
.device-mobile .major-tags,
.device-tablet .major-tags { display: flex; flex-wrap: wrap; margin-top: 8px; }
.device-mobile .major-tags .tag,
.device-tablet .major-tags .tag { background: #eef2ff; color: #4f46e5; font-size: 12px; padding: 4px 11px; border-radius: 12px; margin: 0 6px 6px 0; }

/* ---- 联系方式 ---- */
.device-mobile .contact-wrap,
.device-tablet .contact-wrap { display: block; }
.device-mobile .contact-list,
.device-tablet .contact-list { width: 100%; }
.device-mobile .c-row,
.device-tablet .c-row { display: flex; font-size: 13px; padding: 6px 0; border-bottom: 1px dashed #f1f2f5; }
.device-mobile .c-row:last-child,
.device-tablet .c-row:last-child { border-bottom: none; }
.device-mobile .c-label,
.device-tablet .c-label { width: 72px; color: #9aa1ab; flex-shrink: 0; }
.device-mobile .c-val,
.device-tablet .c-val { flex: 1; color: #1f2937; }
.device-mobile .contact-map,
.device-tablet .contact-map { margin-top: 12px; border-radius: 9px; overflow: hidden; min-height: 120px; background: #f3f4f6; }

/* ---- 友情链接（对齐小程序 footer-link 浅色胶囊版） ---- */
.device-mobile .links-grid,
.device-tablet .links-grid { display: flex; flex-wrap: wrap; }
.device-mobile .links-grid a,
.device-tablet .links-grid a { font-size: 12px; color: #4f46e5; background: #eef2ff; padding: 6px 14px; border-radius: 12px; margin: 0 6px 6px 0; text-decoration: none; }
.device-mobile .links-grid a:active,
.device-tablet .links-grid a:active { background: #e0e7ff; }

/* ---- 底部 footer（对齐小程序 .footer：深色圆角卡） ---- */
.device-mobile .home-footer,
.device-tablet .home-footer {
    background: linear-gradient(135deg, #0f172a, #1e1b4b);
    color: #cbd5e1;
    margin: 11px 12px;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 5px 15px rgba(15, 23, 42, 0.25);
}
.device-mobile .home-footer .footer-links,
.device-tablet .home-footer .footer-links { display: flex; flex-wrap: wrap; }
.device-mobile .home-footer .footer-links a,
.device-tablet .home-footer .footer-links a { font-size: 11.5px; color: #94a3b8; background: rgba(255,255,255,0.08); padding: 4px 10px; border-radius: 10px; margin: 0 6px 6px 0; text-decoration: none; }
.device-mobile .home-footer .footer-meta,
.device-tablet .home-footer .footer-meta { margin-top: 7px; font-size: 10.5px; color: #94a3b8; }
.device-mobile .home-footer .footer-records,
.device-tablet .home-footer .footer-records { margin-top: 8px; font-size: 10.5px; color: #94a3b8; display: flex; gap: 12px; flex-wrap: wrap; }
.device-mobile .home-footer .footer-records a,
.device-tablet .home-footer .footer-records a { color: #94a3b8; }

/* ============================================================
 * 组件级 1:1 强化修复：用 !important 硬覆盖 style.css 的桌面/媒体查询规则
 * ============================================================ */

/* Hero：取消桌面 min-height，显示 logo，浮动数据卡做成小程序透明琥珀风 */
.device-mobile .home-hero .hero-logo,
.device-tablet .home-hero .hero-logo { display: block !important; }
.device-mobile .home-hero .hero-inner,
.device-tablet .home-hero .hero-inner { min-height: auto !important; }
.device-mobile .home-hero .float-card,
.device-tablet .home-hero .float-card {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
}
.device-mobile .home-hero .float-card b,
.device-tablet .home-hero .float-card b { color: #fbbf24 !important; }

/* 办学特色：强制 flex 两列，避免 style.css 的 grid 一列覆盖 */
.device-mobile .feature-grid,
.device-tablet .feature-grid { display: flex !important; flex-wrap: wrap !important; }
.device-mobile .feature-item,
.device-tablet .feature-item { width: 50% !important; box-sizing: border-box !important; }

/* 校园风光：强制横向滚动，避免 grid */
.device-mobile .gallery,
.device-tablet .gallery {
    display: block !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
.device-mobile .gallery img,
.device-tablet .gallery img {
    width: 150px !important;
    height: 105px !important;
    display: inline-block !important;
    vertical-align: top !important;
    margin-right: 8px !important;
}

/* 底部 footer：手机/平板强制单列堆叠 */
.device-mobile .home-footer .footer-bottom,
.device-tablet .home-footer .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    text-align: left !important;
}
.device-mobile .home-footer .footer-col,
.device-tablet .home-footer .footer-col { width: 100% !important; }