/* ===================== 考试题库程序 · 新版手机端 UI（modern） =====================
 *
 * 只在后台「系统设置 → 手机端模板」切换为「新版」时加载（body 带 .mt 类），
 * 并且所有规则都包在 @media(max-width:900px) 内 —— 电脑端（含默认模板）表现完全不变。
 *
 * 设计要点：
 *   1. 顶部品牌色 App Bar（滚动时自动收起公告条，保持导航常驻）
 *   2. 底部固定 Tab 导航（首页 / 试卷 / 资讯 / 我的），含 iPhone 安全区适配
 *   3. 列表与区块统一为「大圆角卡片」，筛选条件改为横滑胶囊
 *   4. 弹窗改为底部抽屉（bottom sheet），更贴合手机操作习惯
 *
 * 品牌主色由后台设置注入（--mt-brand / --mt-brand-rgb），此处仅提供默认值与兜底。
 * ================================================================================= */

:root { --mt-brand: #2563eb; --mt-brand-rgb: 37, 99, 235; }

/* 底部导航只在窄屏出现：宽屏下即便渲染了节点也不显示 */
.mt-tabbar { display: none; }

@media (max-width: 900px) {

  /* ---------------- 基础底板 ---------------- */
  body.mt {
    background: #f2f5fa;
    color: #101a2e;
    padding-bottom: calc(var(--mt-tab-h, 58px) + env(safe-area-inset-bottom));
    -webkit-font-smoothing: antialiased;
  }
  body.mt .container { padding: 0 14px; max-width: 100%; }
  body.mt .wrap-main { padding: 12px 0 26px; }
  body.mt .muted { color: #93a1b6; }

  /* ---------------- 顶部 App Bar ---------------- */
  body.mt .site-header {
    position: sticky;
    top: 0;
    z-index: 70;
    border: 0;
    background: var(--mt-brand);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(0, 0, 0, .07));
    box-shadow: 0 4px 18px rgba(var(--mt-brand-rgb), .24);
  }
  body.mt .header-inner { display: flex; align-items: center; gap: 10px; height: auto; padding: 10px 0 8px; flex-wrap: wrap; }
  body.mt .nav-toggle { order: 0; width: 38px; height: 38px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .18); display: flex; }
  body.mt .nav-toggle i { width: 16px; background: #fff; }
  body.mt .logo { order: 1; flex: 1; min-width: 0; gap: 9px; }
  body.mt .logo-mark { width: 34px; height: 34px; font-size: 17px; border-radius: 11px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
  body.mt .logo-text { color: #fff; font-size: 16.5px; font-weight: 600; letter-spacing: .3px; }
  body.mt .logo img { max-height: 32px; }
  body.mt .top-user { order: 2; gap: 8px; }
  body.mt .top-user .btn-line,
  body.mt .top-user .btn-solid { border: 0; border-radius: 999px; padding: 7px 14px; font-size: 13px; background: rgba(255, 255, 255, .18); color: #fff; }
  body.mt .top-user .btn-solid { background: #fff; color: var(--mt-brand); font-weight: 600; }
  body.mt .points { color: rgba(255, 255, 255, .9); font-size: 12.5px; }
  body.mt .points b { color: #fff; }
  body.mt .top-search { order: 3; flex-basis: 100%; height: 38px; margin: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .95); overflow: hidden; }
  body.mt .top-search input { padding: 0 15px; font-size: 15px; background: transparent; }
  body.mt .top-search button { width: 68px; margin: 3px; border-radius: 999px; background: var(--mt-brand); color: #fff; font-size: 13.5px; }
  body.mt .main-nav { display: none; }

  /* 公告条：位于 App Bar 内，滚动时收起让导航更紧凑 */
  body.mt .notice-ticker { max-height: 44px; overflow: hidden; background: #fff; border-bottom: 1px solid #e9eef6; transition: max-height .22s ease, opacity .18s ease; }
  body.mt.mt-scrolled .notice-ticker { max-height: 0; opacity: 0; }
  body.mt .ticker-inner { height: 36px; gap: 10px; }
  body.mt .ticker-view { height: 20px; }
  body.mt .ticker-slide { height: 20px; }
  body.mt .ticker-slide a, body.mt .ticker-slide span.ticker-item { font-size: 13px; }
  body.mt .ticker-badge { background: rgba(var(--mt-brand-rgb), .1); color: var(--mt-brand); border-radius: 8px; }
  body.mt .ticker-badge svg { fill: var(--mt-brand); }
  body.mt .ticker-slide a:before, body.mt .ticker-slide span.ticker-item:before { color: var(--mt-brand); }

  /* ---------------- 抽屉导航 ---------------- */
  body.mt .mobile-nav { width: 86%; max-width: 340px; border-radius: 0 20px 20px 0; }
  body.mt .mn-hd { height: 58px; padding: 0 18px; background: var(--mt-brand); }
  body.mt .mn-user { padding: 16px 18px; border-bottom: 0; background: #fff; }
  body.mt .mn-user-tx b { font-size: 15.5px; }
  body.mt .mn-btns a { border-radius: 999px; }
  body.mt .mn-btns .btn-solid { background: var(--mt-brand); border-radius: 999px; }
  body.mt .mn-grp { padding: 14px 18px 6px; background: transparent; font-size: 11.5px; letter-spacing: 1.5px; color: #93a1b6; }
  body.mt .mn-list { background: #fff; margin: 0 14px; padding: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(16, 32, 64, .05); }
  body.mt .mn-list li a { padding: 13px 16px; font-size: 14.5px; border-bottom: 1px solid #f1f4fa; }
  body.mt .mn-list li:last-child a { border-bottom: 0; }
  body.mt .mn-list li a:active { background: rgba(var(--mt-brand-rgb), .07); color: var(--mt-brand); }

  /* ---------------- 卡片与标题 ---------------- */
  body.mt .card, body.mt .side-card, body.mt .filter-card {
    background: #fff;
    border: 1px solid #e9eef6;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(16, 32, 64, .05);
    padding: 16px 15px;
    margin-bottom: 14px;
  }
  body.mt .card-hd { border-bottom: 0; padding-bottom: 10px; margin-bottom: 12px; }
  body.mt .card-hd h3 { font-size: 16px; font-weight: 700; border-left: 3px solid var(--mt-brand); padding-left: 11px; }
  body.mt .card-hd .more { font-size: 12.5px; color: var(--mt-brand); background: rgba(var(--mt-brand-rgb), .08); border-radius: 999px; padding: 5px 12px; }
  body.mt .side-card h3 { font-size: 15px; border-bottom: 1px solid #eef2f8; padding-bottom: 10px; margin-bottom: 12px; }
  body.mt .side-card h3:after { background: var(--mt-brand); width: 38px; height: 3px; border-radius: 3px; }

  /* ---------------- 首页 hero ---------------- */
  body.mt .hero {
    background: var(--mt-brand);
    background-image: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .09));
    border-radius: 20px;
    padding: 22px 18px;
    margin-bottom: 14px;
    box-shadow: 0 12px 26px rgba(var(--mt-brand-rgb), .24);
  }
  body.mt .hero h2 { font-size: 19px; line-height: 1.42; margin-bottom: 8px; }
  body.mt .hero p { font-size: 13px; opacity: .92; }
  body.mt .hero-tags { display: flex; flex-wrap: nowrap; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px -18px 0; padding: 0 18px 2px; }
  body.mt .hero-tags::-webkit-scrollbar { display: none; }
  body.mt .hero-tags a { flex: 0 0 auto; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .34); }
  body.mt .hero-tags a:active { background: #fff; color: var(--mt-brand); }

  /* ---------------- 数据统计 ---------------- */
  body.mt .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
  body.mt .stat-box { position: relative; overflow: hidden; padding: 13px 14px 13px 16px; background: #fff; border: 1px solid #e9eef6; border-radius: 15px; box-shadow: none; }
  body.mt .stat-box:before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mt-brand); }
  body.mt .stat-box span { font-size: 12px; color: #6c7b93; margin-bottom: 2px; }
  body.mt .stat-box b { font-size: 21px; color: var(--mt-brand); }
  body.mt .stat-box b.r { color: #e2453c; }

  /* ---------------- 分类网格 ---------------- */
  body.mt .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.mt .cat-item { position: relative; overflow: hidden; padding: 13px; background: #fff; border: 1px solid #e9eef6; border-radius: 15px; }
  body.mt .cat-item:after { content: ""; position: absolute; right: -16px; top: -16px; width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--mt-brand-rgb), .08); }
  body.mt .cat-item b { font-size: 14px; margin-bottom: 3px; }
  body.mt .cat-item span { font-size: 11.5px; color: #93a1b6; }
  body.mt .cat-item:active { transform: scale(.985); }

  /* ---------------- 试卷列表：整块卡片化 ---------------- */
  body.mt .paper-list li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 11px; padding: 13px; margin-bottom: 10px; background: #fff; border: 1px solid #e9eef6; border-radius: 16px; box-shadow: 0 4px 12px rgba(16, 32, 64, .04); }
  body.mt .paper-list li:last-child { margin-bottom: 0; border-bottom: 1px solid #e9eef6; }
  body.mt .paper-list li:hover { background: #fff; }
  body.mt .paper-list li:active { border-color: rgba(var(--mt-brand-rgb), .4); }
  body.mt .paper-ico { width: 42px; height: 42px; border-radius: 12px; font-size: 11px; background: rgba(var(--mt-brand-rgb), .1); color: var(--mt-brand); }
  body.mt .paper-main h4 { font-size: 14.5px; font-weight: 600; line-height: 1.5; margin-bottom: 5px; }
  body.mt .paper-main h4 a { color: #101a2e; }
  body.mt .paper-meta { font-size: 11.5px; color: #93a1b6; gap: 6px 10px; }
  body.mt .paper-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12.5px; color: #6c7b93; margin-top: 5px; }
  body.mt .paper-side { width: 100%; max-width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; padding-top: 10px; border-top: 1px dashed #eef2f8; }
  body.mt .btn-down { background: rgba(var(--mt-brand-rgb), .1); color: var(--mt-brand); border-radius: 999px; padding: 8px 16px; font-weight: 600; }
  body.mt .btn-down:active { background: var(--mt-brand); color: #fff; }
  body.mt .tag { border-radius: 999px; padding: 3px 10px; }

  /* ---------------- 筛选条：标签横滑 ---------------- */
  body.mt .filter-head { padding-bottom: 2px; }
  body.mt .filter-toggle { border-radius: 999px; border: 1px solid #e9eef6; background: #fff; }
  body.mt .filter-toggle.on { border-color: var(--mt-brand); color: var(--mt-brand); background: rgba(var(--mt-brand-rgb), .08); }
  body.mt .filter-row { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 0; border-bottom: 0; }
  body.mt .filter-row .lb { width: auto; font-size: 12px; color: #93a1b6; line-height: 1.5; }
  body.mt .filter-row .opts { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 7px; margin: 0 -15px; padding: 0 15px; }
  body.mt .filter-row .opts::-webkit-scrollbar { display: none; }
  body.mt .filter-row .opts a { flex: 0 0 auto; padding: 5px 13px; border-radius: 999px; background: #f3f6fb; color: #6c7b93; font-size: 12.5px; }
  body.mt .filter-row .opts a.on { background: var(--mt-brand); color: #fff; }

  /* ---------------- 详情页 ---------------- */
  body.mt .crumb { font-size: 12px; color: #93a1b6; padding: 10px 0 2px; }
  body.mt .detail-hd h1 { font-size: 18px; line-height: 1.45; }
  body.mt .detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 14px; padding: 13px 14px; background: #fff; border: 1px solid #e9eef6; border-radius: 15px; font-size: 12.5px; color: #6c7b93; border-bottom: 1px solid #e9eef6; }
  body.mt .detail-meta b { color: #101a2e; }
  body.mt .file-box { background: #fff; border: 1px solid #e9eef6; border-radius: 16px; padding: 15px; gap: 12px; }
  body.mt .file-box .btn-big { margin-top: 4px; }
  body.mt .price-tip { color: #f08300; }
  body.mt .btn-big { background: var(--mt-brand); border-radius: 14px; padding: 14px; font-size: 16px; box-shadow: 0 8px 20px rgba(var(--mt-brand-rgb), .26); }
  body.mt .btn-big:active { background: var(--mt-brand); opacity: .86; }
  body.mt .content-body { font-size: 14.5px; line-height: 1.95; color: #233048; }
  body.mt .alert { border-radius: 13px; }

  /* 在线预览 / 试卷内容 */
  body.mt .pv-bar { border-radius: 14px 14px 0 0; background: #fff; border-color: #e9eef6; }
  body.mt .pv-btn { border-radius: 9px; }
  body.mt .pv-stage { height: min(62vh, 520px); padding: 8px; border-radius: 0 0 14px 14px; background: #e8edf5; }
  body.mt .pv-open { border-radius: 999px; background: rgba(var(--mt-brand-rgb), .1); color: var(--mt-brand); }
  body.mt .exam-view canvas { border-radius: 12px; }
  body.mt .exam-cta, body.mt .pv-cta, body.mt .exam-noscript { background: rgba(var(--mt-brand-rgb), .05); border-color: rgba(var(--mt-brand-rgb), .28); border-radius: 14px; }
  body.mt .exam-lock { color: #93a1b6; }

  /* ---------------- 表单 / 会员中心 ---------------- */
  body.mt .form-box { border-radius: 18px; box-shadow: 0 6px 22px rgba(16, 32, 64, .06); padding: 22px 16px; }
  body.mt .form-title { font-size: 18px; }
  body.mt .form-btn { border-radius: 13px; background: var(--mt-brand); }
  body.mt .field input[type=text], body.mt .field input[type=password], body.mt .field input[type=email],
  body.mt .field input[type=number], body.mt .field input[type=search], body.mt .field select, body.mt .field textarea { border-radius: 12px; border-color: #e2e8f2; background: #f8fafd; }
  body.mt .user-menu { background: #fff; border: 1px solid #e9eef6; border-radius: 15px; }
  body.mt .user-menu a { padding: 12px 15px; font-size: 13.5px; }
  body.mt .user-menu a.on { border-left: 0; border-bottom: 3px solid var(--mt-brand); color: var(--mt-brand); }

  /* ---------------- 表格 / 分页 / 列表条 ---------------- */
  body.mt .table { font-size: 12.5px; }
  body.mt .table th { background: #f7f9fd; color: #6c7b93; }
  body.mt .table th, body.mt .table td { padding: 10px 11px; }
  body.mt .table-wrap { margin: 0 -15px; padding: 0 15px; }
  body.mt .pager { margin: 18px 0 2px; gap: 6px; }
  body.mt .pager a, body.mt .pager span { border-radius: 10px; border-color: #e9eef6; }
  body.mt .pager .cur { background: var(--mt-brand); border-color: var(--mt-brand); box-shadow: 0 4px 12px rgba(var(--mt-brand-rgb), .28); }
  body.mt .rank-list li, body.mt .notice-list li { font-size: 13px; padding: 10px 0; }
  body.mt .rank-no { border-radius: 8px; }
  body.mt .rank-list li:nth-child(1) .rank-no { background: var(--mt-brand); }
  body.mt .notice-list li:before { color: var(--mt-brand); }
  body.mt .flash-msg { border-radius: 13px; }

  /* ---------------- 页脚 ---------------- */
  body.mt .site-footer { margin-top: 20px; }
  body.mt .footer-top { padding: 18px 14px 10px; }
  body.mt .footer-bottom { padding: 12px 14px; }
  body.mt .back-top { right: 14px; bottom: calc(var(--mt-tab-h, 58px) + 20px + env(safe-area-inset-bottom)); width: 40px; height: 40px; line-height: 40px; border-radius: 14px; border-color: #e9eef6; }

  /* ---------------- 弹窗：底部抽屉 ---------------- */
  body.mt .popup-mask { align-items: flex-end; padding: 0; }
  body.mt .popup-box { max-width: 100%; width: 100%; border-radius: 20px 20px 0 0; }
  body.mt .popup-head { background: #fff; border-bottom: 1px solid #eef2f8; }
  body.mt .popup-foot button { border-radius: 13px; background: var(--mt-brand); }

  /* ---------------- 底部 Tab 导航 ---------------- */
  body.mt .mt-tabbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid #e9eef6;
    box-shadow: 0 -6px 22px rgba(16, 32, 64, .07);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  body.mt .mt-tabbar-in { display: flex; align-items: stretch; height: var(--mt-tab-h, 58px); }
  body.mt .mt-tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #93a1b6; font-size: 11px; line-height: 1; transition: color .16s; }
  body.mt .mt-tab svg { display: block; width: 23px; height: 23px; fill: currentColor; transition: transform .16s; }
  body.mt .mt-tab.on { color: var(--mt-brand); font-weight: 600; }
  body.mt .mt-tab.on svg { transform: translateY(-1px); }
  body.mt .mt-tab:active { opacity: .65; }
}

/* 小屏手机：进一步收紧间距，避免横向溢出 */
@media (max-width: 400px) {
  body.mt .container { padding: 0 12px; }
  body.mt .card, body.mt .side-card, body.mt .filter-card { padding: 14px 13px; border-radius: 16px; }
  body.mt .top-user .btn-line, body.mt .top-user .btn-solid { padding: 6px 11px; font-size: 12.5px; }
  body.mt .top-search { height: 36px; }
  body.mt .top-search button { width: 60px; font-size: 13px; }
  body.mt .hero h2 { font-size: 17.5px; }
  body.mt .cat-grid, body.mt .stat-grid { gap: 8px; }
  body.mt .paper-ico { width: 38px; height: 38px; font-size: 10.5px; }
  body.mt .filter-row .opts { margin: 0 -13px; padding: 0 13px; }
  body.mt .table-wrap { margin: 0 -13px; padding: 0 13px; }
  body.mt .detail-meta { grid-template-columns: 1fr 1fr; gap: 7px 10px; }
  body.mt .mt-tab span { font-size: 10.5px; }
}

/* 打印与动效偏好 */
@media print {
  body.mt .mt-tabbar { display: none !important; }
  body.mt { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.mt .notice-ticker, body.mt .mt-tab svg { transition: none; }
}