/* ===========================================================
   脑机网 · 移动端重构（新闻 App 信息流）
   目标：手机上的观感对齐新华网 App —— 紧凑顶栏 + 可横滑栏目条
   + 卡片流 + 底部导航 + 阅读工具条
   仅在 <=760px 生效，桌面端完全不受影响
   =========================================================== */
@media (max-width: 760px) {
  :root {
    --hd: 50px;
    --tabbar: 52px;
    --pad: 14px;
  }

  html { -webkit-text-size-adjust: 100%; }
  body {
    font-size: 16px;
    background: #fff;
    padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }
  .wrap { padding: 0 var(--pad); }
  img { border-radius: 0; }

  /* ---------------- 顶栏 ---------------- */
  .hd { position: sticky; top: 0; z-index: 70; background: rgba(255, 255, 255, .95); transition: transform .22s ease; }
  .hd-in { height: var(--hd); padding: 0 var(--pad); gap: 8px; }
  .brand { gap: 7px; }
  .brand img { width: 28px; height: 28px; }
  .brand b { font-size: 17px; letter-spacing: .04em; }
  .brand i { display: none; }
  .burger { display: none; }
  .nav { display: none !important; }
  .hd-right { gap: 2px; }
  .icon-btn { width: 36px; height: 36px; }
  .uinfo .ubtn { padding: 3px 8px 3px 3px; }
  .uinfo .ubtn b { font-size: 12.5px; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .uinfo .av { width: 24px !important; height: 24px !important; font-size: 11px !important; }

  /* ---------------- 栏目横滑条 ---------------- */
  .mcat {
    position: sticky; top: var(--hd); z-index: 69; transition: transform .22s ease;
    display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 0 8px; scrollbar-width: none;
  }
  .mcat::-webkit-scrollbar { display: none; }
  .mcat a {
    flex: none; padding: 11px 10px 9px; font-size: 15px; color: var(--ink2);
    position: relative; white-space: nowrap; letter-spacing: .01em;
  }
  .mcat a.on { color: var(--red); font-weight: 600; font-size: 15.5px; }
  .mcat a.on::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    bottom: 3px; width: 18px; height: 3px; border-radius: 2px; background: var(--red);
  }

  /* ---------------- 阅读进度条 ---------------- */
  .mprog { position: fixed; left: 0; right: 0; top: var(--hd); height: 2px; z-index: 71; pointer-events: none; }
  .mprog i { display: block; height: 100%; width: 0; background: var(--red); transition: width .1s linear; }

  /* ---------------- 底部导航 ---------------- */
  .mtab {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
    display: flex; background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mtab a {
    flex: 1; height: var(--tabbar); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px; color: #9aa0a6;
  }
  .mtab a svg { width: 22px; height: 22px; }
  .mtab a span { font-size: 10.5px; line-height: 1; }
  .mtab a.on { color: var(--red); }

  /* ---------------- 文章阅读工具条 ---------------- */
  .mtool {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 76;
    display: none; align-items: center; background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
  }
  .mtool.on { display: flex; }
  .mtool button {
    flex: 1; height: var(--tabbar); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px; color: #6b7178; font-size: 10.5px;
  }
  .mtool button svg { width: 21px; height: 21px; }
  .mtool button:active { background: var(--soft); }
  .mtool .red { color: var(--red); }
  body.is-art .mtab { display: none; }

  /* ---------------- 首页 hero ---------------- */
  .hero { padding: 16px 0 14px; border-bottom: none; background: none; }
  .hero-in { gap: 0; }
  .hero .eyebrow { font-size: 10.5px; }
  .hero h1 { font-size: 25px; line-height: 1.34; margin: 10px 0 0; }
  .hero p.m { font-size: 14.5px; line-height: 1.8; margin: 12px 0 0; }
  .hero-cta { margin-top: 16px; gap: 10px; }
  .hero-cta .btn { height: 34px; font-size: 13.5px; padding: 0 14px; }
  .hero-brand { display: none; }

  /* ---------------- 板块标题 ---------------- */
  .sec { padding: 14px 0 4px; }
  .sec + .sec { position: relative; margin-top: 16px; padding-top: 16px; }
  .sec + .sec::before {
    content: ""; position: absolute; top: -8px; left: calc(var(--pad) * -1); right: calc(var(--pad) * -1);
    height: 8px; background: #f4f4f1;
  }
  .sec-hd { align-items: center; gap: 8px; margin-bottom: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line2); }
  .sec-hd h2 { font-size: 18px; position: relative; padding-left: 10px; line-height: 1.2; }
  .sec-hd h2::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 15px; border-radius: 2px; background: var(--red);
  }
  .sec-hd .sub { display: none; }
  .sec-hd .more { font-size: 12.5px; color: var(--ink3); }

  /* ---------------- 头条 ---------------- */
  .feat { grid-template-columns: 1fr; gap: 0; }
  .feat-main .thumb { border-radius: 6px; }
  .feat-main h3 { font-size: 21px; line-height: 1.45; margin: 12px 0 8px; }
  .feat-main p { font-size: 14px; line-height: 1.8; margin-bottom: 8px; }
  .feat-side { border-top: none; margin-top: 6px; }
  .feat-side a { padding: 13px 0; }
  .feat-side h4 { font-size: 16.5px; line-height: 1.55; }

  /* ---------------- 卡片 → 信息流条目（左文右图） ---------------- */
  .grid3, .grid2 { display: block; }
  .card {
    display: grid; grid-template-columns: 1fr 118px; grid-template-rows: auto auto auto;
    gap: 4px 12px; align-items: start;
    padding: 14px 0; border-bottom: 1px solid var(--line2);
  }
  .card:active { background: #fafaf8; }
  .card .thumb {
    grid-column: 2; grid-row: 1 / 4; aspect-ratio: 4 / 3;
    border-radius: 5px; box-shadow: none; overflow: hidden; background: #f0f0ee;
  }
  .card:hover .thumb { transform: none; box-shadow: none; }
  .card:hover .thumb img { transform: none; }
  .card h3 {
    grid-column: 1; font-size: 17px; line-height: 1.5; margin: 0 0 5px;
    min-height: 0; font-weight: 600; -webkit-line-clamp: 3;
  }
  .card p {
    grid-column: 1; font-size: 13px; line-height: 1.65; margin: 0 0 6px;
    -webkit-line-clamp: 1; color: var(--ink3);
  }
  .card .meta { grid-column: 1; font-size: 11.5px; gap: 8px; }
  .card .meta .chip { display: none; }

  /* ---------------- 栏目杂志块 ---------------- */
  .mag { grid-template-columns: 1fr; gap: 0; }
  .mag-lead .thumb { border-radius: 6px; box-shadow: none; }
  .mag-lead h3 { font-size: 19px; margin: 12px 0 7px; }
  .mag-lead p { font-size: 13.5px; margin-bottom: 8px; }
  .mag-list a { padding: 13px 0; }
  .mag-list h4 { font-size: 16px; line-height: 1.55; font-weight: 400; }

  /* ---------------- 栏目页 ---------------- */
  .cat-hero { padding: 22px 0 14px; }
  .cat-hero .bar { width: 32px; height: 3px; margin-bottom: 12px; }
  .cat-hero h1 { font-size: 27px; margin-bottom: 6px; }
  .cat-hero p { font-size: 14px; margin-top: 10px; }
  .cat-hero .n { margin-top: 12px; font-size: 12.5px; }
  .cat-hero + .wrap > .sec { padding-top: 8px; }

  /* ---------------- 搜索结果 ---------------- */
  .search-hd h1, .wrap > h1 { font-size: 24px !important; }
  .list .row {
    grid-template-columns: 1fr 118px; gap: 4px 12px; align-items: start;
    padding: 14px 0;
  }
  .list .row .thumb { grid-column: 2; grid-row: 1 / 4; aspect-ratio: 4 / 3; border-radius: 5px; }
  .list h3 { grid-column: 1; font-size: 17px; margin: 0 0 5px; line-height: 1.5; }
  .list p { grid-column: 1; font-size: 13px; margin-bottom: 6px; -webkit-line-clamp: 1; }
  .list .meta { grid-column: 1; }

  /* ---------------- 文章页 ---------------- */
  .art-hero { padding: 14px 0 0; }
  .art-hero .eyebrow { font-size: 11px; }
  .art-hero h1 { font-size: 24px; line-height: 1.42; margin: 10px 0 12px; letter-spacing: -.004em; }
  .art-hero .lead { font-size: 15px; line-height: 1.8; }
  .art-meta { gap: 10px; margin-top: 14px; padding-bottom: 14px; font-size: 12px; }
  .art-cover { margin: 14px 0 0; border-radius: 7px; aspect-ratio: 16 / 9; box-shadow: none; }
  .art-body { display: block; max-width: none; padding: 0 var(--pad); }
  .toc { display: none; }
  .content {
    font-size: 17px; line-height: 1.92; padding: 18px 0 0; max-width: none;
    letter-spacing: .01em; color: #26282c;
  }
  .content > p:first-child { font-size: 17.5px; }
  .content p { margin: 0 0 20px; }
  .content h2 {
    font-size: 20px; line-height: 1.5; margin: 32px 0 14px;
    padding-left: 10px; border-left: 3px solid var(--red);
  }
  .content h3 { font-size: 17.5px; margin: 26px 0 12px; }
  .content blockquote { margin: 22px 0; padding: 14px 16px; font-size: 15.5px; border-radius: 0 8px 8px 0; }
  .content ul, .content ol { padding-left: 22px; }
  .content li { margin-bottom: 8px; }
  .content img { border-radius: 7px; margin: 8px 0 20px; }

  /* 上下篇 */
  .pn { grid-template-columns: 1fr; gap: 10px; margin: 30px 0 0; padding-top: 24px; }
  .pn a { padding: 14px 16px; border-radius: 10px; }
  .pn .r { text-align: left; }
  .pn b { font-size: 14px; }

  /* ---------------- 评论 / 分享 ---------------- */
  .cmt-wrap { padding: 4px var(--pad) 24px; }
  .cmt-hd { padding-top: 20px; }
  .cmt-hd h3 { font-size: 19px; }
  .share-mini { width: 100%; gap: 8px; margin-top: 12px; }
  .share-mini .sbtn { flex: 1; text-align: center; padding: 9px 4px; font-size: 13px; border-radius: 8px; }
  .cmt { padding: 14px 0; }
  .cmt-c { font-size: 15px; }
  .cmt-form textarea { font-size: 15px; }

  /* ---------------- 论坛 ---------------- */
  .ftop { padding: 22px 0 8px; }
  .ftop h1 { font-size: 26px; margin: 8px 0 6px; }
  .ftop p { font-size: 14px; margin-bottom: 16px; }
  .btabs a { padding: 6px 12px; font-size: 13px; }
  .titem { padding: 14px 0; }
  .ti-main h4 { font-size: 16.5px; line-height: 1.5; }
  .tpage { padding: 20px var(--pad) 30px; }
  .tpage h1 { font-size: 24px; margin: 8px 0 14px; }
  .tp-c { font-size: 16.5px; line-height: 1.9; padding: 16px 0 22px; }

  /* ---------------- 个人中心 ---------------- */
  .upage { padding: 16px var(--pad) 30px; }
  .ucard { padding: 16px; margin: 12px 0 18px; gap: 14px; }
  .umeta h1 { font-size: 22px; }
  .ubox { padding: 16px 16px 18px; margin-bottom: 14px; }

  /* ---------------- 分页 ---------------- */
  .pager { padding: 26px 0 4px; gap: 6px; }
  .pager a, .pager span { min-width: 34px; height: 34px; font-size: 13.5px; padding: 0 11px; }

  /* ---------------- 页脚 ---------------- */
  .ft { margin-top: 34px; padding: 30px 0 26px; }
  .ft-in { grid-template-columns: 1fr 1fr; gap: 22px; }
  .ft-bot { margin-top: 26px; padding: 16px var(--pad) 0; font-size: 12px; }

  /* ---------------- 搜索浮层 ---------------- */
  .slayer { padding: 0; align-items: stretch; }
  .sbox { width: 100%; border-radius: 0; max-width: none; }
  .sbox-in { padding: 12px var(--pad); gap: 10px; }
  .sbox-in input { font-size: 16px; }
  .sres { max-height: calc(100vh - 120px); }

  /* ---------------- 弹窗：底部面板化 ---------------- */
  .njw-modal { align-items: flex-end; padding: 0; }
  .mbox {
    width: 100%; max-width: none; border-radius: 16px 16px 0 0;
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
    max-height: 90vh; -webkit-animation: mUp .26s cubic-bezier(.2, .9, .28, 1);
    animation: mUp .26s cubic-bezier(.2, .9, .28, 1);
  }
  @-webkit-keyframes mUp { from { -webkit-transform: translateY(30px); opacity: .4 } to { -webkit-transform: translateY(0); opacity: 1 } }
  @keyframes mUp { from { transform: translateY(30px); opacity: .4 } to { transform: translateY(0); opacity: 1 } }
  .mbox h3 { font-size: 21px; }
  .mclose { right: 12px; top: 8px; font-size: 24px; }

  /* ---------------- toast 抬到导航之上 ---------------- */
  .njw-toast { bottom: calc(74px + env(safe-area-inset-bottom)); }
}

@media (max-width: 400px) {
  .card { grid-template-columns: 1fr 100px; }
  .card h3 { font-size: 16px; }
  .art-hero h1 { font-size: 22px; }
}