/* ============================================================
   杂鱼社区 — 「掌上」移动端 UI  v7.0
   ============================================================
   定位：手机（≤1024px，含平板）**独立一套界面**，与桌面端分离。
   桌面端（>1024px）完全不加载本文件的规则，布局一行不改。

   与桌面端的差异（不是把桌面压扁，而是另一套信息架构）：
   · 顶部：双层的「渐变工具条 + 玻璃主头」→ 单层吸顶 AppBar（52px）
   · 导航：横向文字导航 → 底部 5 标签栏 + 上滑「更多」面板
   · 首页：三栏（侧栏-信息流-侧栏）→ 单列流；频道导航转为横向胶囊
   · 私聊：左右分栏 → 列表 / 会话全屏切换，输入框吸底
   · 交互：全部主操作 ≥44px 触控区，适配 iOS 安全区

   依赖：style.css 的设计令牌（颜色全部走变量，两套皮肤自动生效）
   加载：<link media="(max-width:1024px)"> + 内部 @media 双保险
   注意：桌面端的 display:none 写在 style.css 里（本文件在桌面端根本不加载）
   ============================================================ */

@media (max-width: 1024px) {

  :root {
    --m-bar-h: 52px;            /* AppBar 高度 */
    --m-tab-h: 62px;            /* 底部液态玻璃 dock 高度 */
    --m-gut: 14px;              /* 页面左右留白 */
    --m-safe: env(safe-area-inset-bottom, 0px);
    /* 内容区可用高度 = 视口 − 顶 − 底 − 呼吸 */
    --m-chrome: calc(var(--m-bar-h) + var(--m-tab-h) + var(--m-safe) + 28px);
    /* 光块滑行时长：快出缓收（参考主流应用商店的 tab 光效），不拖泥带水。
       header.php 的 JS 会读这个值来对齐标签文字动画 */
    --m-glow-dur: .58s;
    --m-glow-ease: cubic-bezier(.22, .9, .28, 1);
    /* 变色时长与延迟：行程约 28% 处开始转色、85% 前完成，仍是「滑到中途才变色」 */
    --m-glow-color-dur: .3s;
    --m-glow-color-delay: .16s;
  }
  body.chat-open { --m-tab-h: 0px; }

  /* ------------------------------------------------------------
     1. 清场：桌面端专属 chrome 全部下线
     ------------------------------------------------------------ */
  .topbar { display: none !important; }   /* 那条紫色渐变工具条在手机上只会变成一条怪异的色带 */
  .user-menu { display: none !important; } /* 桌面头像下拉 → 收进「更多」面板 */

  /* ------------------------------------------------------------
     2. AppBar：单层吸顶，圆角收口
     ------------------------------------------------------------ */
  .site-header {
    position: sticky; top: 0; z-index: 120;
    background: var(--header-bg);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid var(--card-border);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 18px rgba(36, 29, 77, 0.06);
  }
  .header-inner {
    height: var(--m-bar-h);
    gap: 6px;
    padding: 0 var(--m-gut);
    flex-wrap: nowrap;
  }
  .logo { flex: 1; min-width: 0; gap: 8px; }
  .logo img { height: 30px; border-radius: 9px; }
  .logo span { font-size: 17px; letter-spacing: 0; }

  .nav-bell {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto;
    border-radius: 50%;
    order: 2;
  }
  .nav-toggle {
    display: inline-flex; order: 3;
    width: 38px; height: 38px; padding: 9px; gap: 4px;
    border-radius: 50%;
  }
  .nav-toggle span { width: 17px; height: 2px; }
  .nav-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ------------------------------------------------------------
     3. 「更多」面板：右侧抽屉 → 上滑底部面板（两列图标宫格）
     ------------------------------------------------------------ */
  .nav-overlay {
    z-index: 135;
    background: rgba(24, 20, 48, 0.42);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  .main-nav {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: none; height: auto; max-height: 78vh;
    display: grid; grid-template-columns: 1fr 1fr;
    align-content: start; gap: 8px;
    padding: 30px var(--m-gut) calc(20px + var(--m-safe));
    margin: 0;
    background: var(--card-hover);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: none; border-top: 1px solid var(--card-border);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -14px 44px rgba(24, 20, 48, 0.20);
    z-index: 140;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(103%);
    transition: transform .36s var(--ease-spring);
    flex: none; align-self: auto;
  }
  .main-nav.open { right: 0; transform: translateY(0); }
  /* 顶部拖拽把手 */
  .main-nav::before {
    content: ''; position: absolute; top: 10px; left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 4px;
    background: var(--primary-soft);
  }

  .main-nav a.nav-item {
    display: flex; align-items: center; gap: 9px;
    padding: 13px 13px; min-height: 48px;
    font-size: 14px; font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-soft);
    border: 1px solid transparent;
    border-radius: 13px;
    width: auto;
    transition: background .18s, color .18s;
  }
  .main-nav a.nav-item .icon-svg { color: var(--primary); width: 17px; height: 17px; }
  .main-nav a.nav-item:hover { transform: none; background: var(--primary-light); }
  .main-nav a.nav-item.active {
    background: var(--primary-light);
    border-color: var(--primary-soft);
    color: var(--primary);
    box-shadow: none;
    font-weight: 700;
  }
  .main-nav a.nav-item .nav-badge {
    margin-left: auto;
    position: static;
    min-width: 18px; height: 18px; padding: 0 5px;
    font-size: 10.5px;
  }

  .mobile-user-menu {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    padding: 12px 0 0; margin-top: 6px;
    border-top: 1px solid var(--card-line);
  }
  .mobile-user-item {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px; border-radius: 13px;
    background: var(--primary-light);
    margin-bottom: 4px;
  }
  .mui-link {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 12px; min-height: 44px;
    border-radius: 12px; font-size: 13.5px;
    color: var(--text-secondary);
    background: var(--bg-soft);
  }
  .mui-link:hover { transform: none; background: var(--primary-light); }
  .mui-icon { width: 18px; height: 18px; }
  .mui-icon .icon-svg { width: 16px; height: 16px; }

  /* 面板内工具 & 法律链接 */
  .m-tools {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    padding-top: 10px; margin-top: 4px;
    border-top: 1px solid var(--card-line);
  }
  .m-tool {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 42px; padding: 0 10px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card);
    color: var(--text-secondary);
    font-size: 13px; font-weight: 600;
    font-family: inherit; cursor: pointer;
  }
  .m-tool .icon-svg { color: var(--primary); }
  .m-tool:active { background: var(--primary-light); }

  .m-legal {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; gap: 4px 18px;
    padding: 10px 2px 0; margin-top: 4px;
    border-top: 1px solid var(--card-line);
    font-size: 12px;
  }
  /* 覆盖 style.css 里 `.main-nav a { width:100% }` 造成的一条一行 */
  .m-legal a {
    width: auto; display: inline-block;
    padding: 4px 0; font-size: 12px;
    color: var(--text-muted);
  }
  .m-legal a:active { color: var(--primary); }

  /* ------------------------------------------------------------
     4. 液态玻璃 dock（悬浮，不贴屏幕边）
     ------------------------------------------------------------
     · 整条是磨砂玻璃：半透明底 + backdrop blur/saturate + 顶缘高光
     · 内有一个高光块 .m-tab-glow，宽度正好一格，切页时横向滑过去
     · 高光块的色相由 --tint 决定，跟着当前所在页面走（首页紫 / 频道蓝 /
       画廊粉 / 私信青 / 我的橙），所以每个页面底部光感都不一样
     · 因为 --tint 落在 background-color 上，颜色本身也会跟着渐变过去
     ------------------------------------------------------------ */
  .m-tabbar {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(8px + var(--m-safe));
    z-index: 130;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--m-tab-h);
    padding: 5px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow:
      0 14px 38px rgba(36, 29, 77, 0.18),
      0 2px 8px rgba(36, 29, 77, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.75);
    overflow: hidden;
    transition: transform .34s var(--ease-soft), opacity .3s ease;
  }
  /* 顶缘一道斜向镜面高光，制造「玻璃是有厚度的」错觉 */
  .m-tabbar::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit; pointer-events: none;
    background: linear-gradient(168deg,
                rgba(255, 255, 255, 0.55) 0%,
                rgba(255, 255, 255, 0.10) 34%,
                rgba(255, 255, 255, 0) 58%);
    opacity: .85;
  }
  body.chat-open .m-tabbar {
    transform: translateY(calc(100% + 24px));
    opacity: 0; pointer-events: none;
  }
  /* 会话打开时聊天区必须一路铺到屏幕底，否则输入框下面会露出一条页面底色 */
  body.chat-open .main-content { padding-bottom: 0; }
  body.chat-open .msg-layout { height: calc(100dvh - var(--m-bar-h) - 14px); border-radius: 0; }
  body.chat-open .site-footer { display: none; }

  /* 滑动高光块：恰好覆盖一格（dock 内边距 5px，故宽度扣掉 10px 再均分） */
  .m-tab-glow {
    position: absolute;
    top: 5px; bottom: 5px; left: 5px;
    width: calc((100% - 10px) / 5);
    border-radius: 19px;
    pointer-events: none;
    transform: translateX(calc(var(--i, 0) * 100%));
    /* 快出缓收：起步即有速度，尾段一小段柔和的减速停住 */
    transition: transform var(--m-glow-dur) var(--m-glow-ease);
    will-change: transform;
    background: linear-gradient(158deg,
                rgba(255, 255, 255, 0.88) 0%,
                rgba(255, 255, 255, 0.42) 55%,
                rgba(255, 255, 255, 0.22) 100%);
    box-shadow:
      0 4px 14px rgba(36, 29, 77, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(255, 255, 255, 0.35);
    z-index: 0;
  }
  /* 色相层：颜色变化走 background-color，因此能跟着滑动一起渐变 */
  .m-tab-glow::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background-color: rgba(var(--tint, 109, 93, 246), 0.20);
    /* 延迟 .4s 再开始变色 → 光块滑到中途才换色，而不是一起步就变 */
    transition: background-color var(--m-glow-color-dur) ease var(--m-glow-color-delay);
  }
  /* 底部一小圈外发光，像液体边缘透出来的光 */
  .m-tab-glow::after {
    content: '';
    position: absolute; left: 50%; bottom: -2px;
    width: 46%; height: 5px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(var(--tint, 109, 93, 246), 0.55);
    filter: blur(6px);
    opacity: .8;
    /* 与色相层同步：滑到中途才换色 */
    transition: background var(--m-glow-color-dur) ease var(--m-glow-color-delay);
  }

  /* 首帧瞬移到旧位置时用：把本体和两个伪元素的过渡一起关掉。
     ⚠ 只写 glow.style.transition='none' 是无效的 —— 过渡不继承，
       ::before / ::after 各自的 transition 还在，颜色会被拖成 0 变化 */
  .m-tab-glow.no-anim,
  .m-tab-glow.no-anim::before,
  .m-tab-glow.no-anim::after { transition: none !important; }

  /* ---- 深色模式：白玻璃在暗底上会变成一块刺眼的灰白条，
          换成深色磨砂 + 更弱的镜面高光，色彩靠 tint 提亮 ---- */
  html[data-theme="dark"] .m-tabbar {
    background: rgba(30, 26, 50, 0.66);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow:
      0 16px 40px rgba(0, 0, 0, 0.58),
      0 2px 8px rgba(0, 0, 0, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.10);
  }
  html[data-theme="dark"] .m-tabbar::after {
    background: linear-gradient(168deg,
                rgba(255, 255, 255, 0.14) 0%,
                rgba(255, 255, 255, 0.03) 34%,
                rgba(255, 255, 255, 0) 58%);
    opacity: .9;
  }
  html[data-theme="dark"] .m-tab-glow {
    background: linear-gradient(158deg,
                rgba(255, 255, 255, 0.16) 0%,
                rgba(255, 255, 255, 0.06) 55%,
                rgba(255, 255, 255, 0.03) 100%);
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.20),
      inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  }
  /* 暗底要更浓的色相才「亮」得起来 */
  html[data-theme="dark"] .m-tab-glow::before {
    background-color: rgba(var(--tint, 109, 93, 246), 0.34);
  }
  html[data-theme="dark"] .m-tab-glow::after {
    background: rgba(var(--tint, 109, 93, 246), 0.85);
    opacity: .95;
  }

  .m-tab {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    color: var(--text-muted);
    font-size: 10.5px; font-weight: 600; line-height: 1.1;
    text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .38s ease, transform .2s ease;
  }
  .m-tab .icon-svg { width: 21px; height: 21px; stroke-width: 1.85; transition: transform .3s var(--ease-spring); }
  .m-tab.active { color: var(--text-primary); font-weight: 700; }
  .m-tab.active .icon-svg { transform: translateY(-1px) scale(1.08); }
  .m-tab:active { transform: scale(.94); }

  /* ---- 慢速滑行时的文字同步 ----
     光块要走 1.15s，如果文字还是一到新页面就立刻变亮，就会出现
     「亮着的标签在第三格、光块还在第一格」这种错位感。所以：
       · .is-ghost    刚离开的那一格，先保留高亮外观，等光块到站再褪回灰
       · .is-incoming 将要到达的那一格，先从灰开始，滑到中段才亮起来 */
  .m-tab.is-ghost { color: var(--text-primary); font-weight: 700; }
  .m-tab.is-ghost .icon-svg { transform: translateY(-1px) scale(1.08); }
  .m-tab.active.is-incoming {
    animation: mTabLabelIn var(--m-glow-dur) var(--m-glow-ease) both;
  }
  .m-tab.active.is-incoming .icon-svg {
    animation: mTabIconIn var(--m-glow-dur) var(--m-glow-ease) both;
  }
  @keyframes mTabLabelIn {
    0%, 38% { color: var(--text-muted); }
    100%    { color: var(--text-primary); }
  }
  @keyframes mTabIconIn {
    0%, 38% { transform: none; }
    100%    { transform: translateY(-1px) scale(1.08); }
  }
  /* 系统开了「减弱动态效果」就退回瞬时切换 */
  @media (prefers-reduced-motion: reduce) {
    .m-tab-glow,
    .m-tab-glow::before,
    .m-tab-glow::after {
      transition-duration: .01ms;
      transition-delay: 0s;
    }
    .m-tab.active.is-incoming,
    .m-tab.active.is-incoming .icon-svg { animation: none; }
  }
  .m-tab-badge {
    position: absolute; top: 1px; left: 50%; margin-left: 5px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(160deg, #ff5e7d, #f43f5e);
    color: #fff;
    font-size: 9.5px; font-weight: 800; line-height: 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(244, 63, 94, .45), inset 0 1px 0 rgba(255,255,255,.35);
  }

  /* ------------------------------------------------------------
     5. 内容区：单列流 + 底部安全留白
     ------------------------------------------------------------ */
  .container { padding-left: var(--m-gut); padding-right: var(--m-gut); }
  .main-content {
    padding-top: 14px;
    /* dock 是 fixed + bottom:8px，留白必须把这段偏移也算进去，
       否则最后一屏内容会被 dock 压住（实测差 6~8px） */
    padding-bottom: calc(var(--m-tab-h) + var(--m-safe) + 8px + 22px);
    min-height: 0;
  }
  .main-content > * { animation: none !important; }   /* 移动端省电、防抖动 */

  body { font-size: 14px; -webkit-text-size-adjust: 100%; }

  .card { padding: 14px; border-radius: var(--radius-lg); }
  .card-title { font-size: 15px; margin-bottom: 10px; gap: 7px; }

  .btn { min-height: 42px; padding: 10px 18px; font-size: 14px; }
  .btn-sm { min-height: 34px; }

  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], textarea, select {
    font-size: 16px;   /* <16px 会触发 iOS 聚焦缩放 */
    padding: 12px 14px;
    border-radius: var(--radius);
  }
  /* 上面这条是同特异性的通用规则且写在后面，会盖掉发布框的胶囊形，
     这里单独把发布框的胶囊补回来 */
  input.post-box-input {
    border-radius: var(--radius-full);
    padding: 11px 20px;
    font-size: 16px;
  }

  /* 页头：标题 / 说明 / 操作 竖排 */
  .page-head {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 6px; padding: 2px 0 12px;
  }
  .page-head h1 { font-size: 21px; }
  .page-head p { font-size: 12.5px; line-height: 1.6; }
  .page-head .btn { margin-left: 0; margin-top: 4px; }

  .section-head { padding: 4px 2px 10px; margin-bottom: 12px; }
  .section-head h2 { font-size: 16px; gap: 8px; }
  .section-more { font-size: 12.5px; padding: 5px 10px; }

  /* ------------------------------------------------------------
     6. 首页：三栏 → 单列
     ⚠ 必须显式 align-items:stretch —— style.css 的 .home-layout 带着
       align-items:start，只把它改成纵向 flex 的话子项会按内容宽度收缩
       （信息流只剩 379px，右边空出一大片）。
     ------------------------------------------------------------ */
  .home-layout {
    display: flex; flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .home-layout > .side-col {
    position: static; display: block;
    order: 1;
  }
  .home-layout > .side-col:last-of-type { order: 3; margin-top: 4px; }
  .home-layout > .main-col { order: 2; gap: 0; min-width: 0; }

  /* 频道导航 → 横向胶囊条 */
  .home-layout > .side-col .card { margin-bottom: 12px; }
  .home-layout > .side-col .card:last-child { margin-bottom: 0; }
  .channel-nav {
    display: flex; gap: 8px; overflow-x: auto;
    padding: 0 0 2px; margin: 0 -2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .channel-nav::-webkit-scrollbar { display: none; }
  .channel-nav li { margin: 0; flex: 0 0 auto; }
  .channel-nav a {
    padding: 9px 14px; min-height: 40px;
    background: var(--bg-soft);
    border-radius: var(--radius-full);
    font-size: 13px; white-space: nowrap;
  }
  .channel-nav a:hover { transform: none; }
  /* 右侧渐隐，暗示这里可以横向滑动（否则用户以为被截断了） */
  .channel-nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .channel-nav.scrolled-end {
    -webkit-mask-image: none; mask-image: none;
  }

  /* 快捷宫格 */
  .quick-grid { gap: 9px; margin-bottom: 16px; }
  .quick-item {
    padding: 14px 5px 12px; gap: 8px;
    font-size: 11.5px; line-height: 1.25;
    border-radius: 16px;
    text-align: center;
  }
  .quick-item .qicon { width: 40px; height: 40px; border-radius: 13px; }
  .quick-item .qicon .icon-svg { width: 19px; height: 19px; }

  /* 发布框 */
  /* 发布框：与上方标题栏连成一条带子 */
  .post-box { margin: -12px 0 14px; padding: 11px 11px 13px; border-radius: 0 0 18px 18px; }
  .post-box-row { gap: 9px; }
  .post-box-input { min-width: 0; }

  /* 信息流卡片 */
  .feed-post { margin-bottom: 12px; }
  .post-head { gap: 9px; align-items: flex-start; }
  .post-title { font-size: 16.5px; line-height: 1.45; }
  .post-content { font-size: 14px; line-height: 1.72; }
  .post-imgs { gap: 6px; }
  .post-imgs img { height: 104px; border-radius: 10px; }
  .post-foot { padding-top: 10px; }

  /* ------------------------------------------------------------
     7. 画廊 / 画师 / 交易：栅格收敛
     ------------------------------------------------------------ */
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .art-grid { gap: 8px; }
  .art-detail-img img { max-height: 52vh; }
  .profile-banner { height: 132px; border-radius: var(--radius-lg); margin-bottom: -38px; }
  .mini-avatar.xl { width: 68px; height: 68px; }

  .filter-tabs {
    display: flex; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
    padding: 4px; border-radius: var(--radius-full);
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tabs a { flex: 0 0 auto; padding: 8px 15px; font-size: 13px; }

  /* ------------------------------------------------------------
     8. 私聊：列表 / 会话 全屏切换
     ------------------------------------------------------------ */
  .msg-layout {
    display: flex; flex-direction: column;
    height: calc(100dvh - var(--m-chrome));
    min-height: 320px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
  }
  .conv-list {
    width: 100%; height: 100%; max-height: none;
    position: absolute; inset: 0;
    border-right: none; overflow-y: auto;
    background: var(--card); z-index: 1;
    padding-top: 10px;
    display: flex; flex-direction: column;
  }
  /* 会话列表为空时，空态在可视高度内垂直居中，而不是贴在顶部 */
  .conv-list:has(.conv-list-empty) { justify-content: center; }
  .conv-main {
    display: none; width: 100%; height: 100%;
    position: absolute; inset: 0;
    background: var(--bg-soft); z-index: 2;
    flex-direction: column;
  }
  .conv-main.mobile-show { display: flex; }
  .conv-list.mobile-hidden { display: none; }
  .mobile-back-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-right: 4px;
    border-radius: 50%;
  }
  .conv-head { padding: 10px 12px; }
  .conv-body { padding: 14px 12px; }
  .conv-input {
    padding: 9px 10px;
    padding-bottom: max(9px, var(--m-safe));
    gap: 7px;
  }
  .conv-input input[type="text"] { padding: 10px 14px; font-size: 16px; }
  .conv-input .btn { min-height: 40px; padding: 9px 15px; }
  /* 气泡在 .msg-col 内部，宽度相对列容器（已扣头像）计算 */
  .msg-col .bubble { max-width: 84%; font-size: 14px; line-height: 1.6; }
  .bubble img { max-width: 190px !important; }
  .msg-time { font-size: 10.5px; }
  .conv-item { padding: 12px 13px; }
  .conv-item .mini-avatar { width: 44px; height: 44px; }
  .msg-img { max-width: 160px; max-height: 210px; }
  .msg-video { max-width: 190px; max-height: 250px; }

  /* ------------------------------------------------------------
     9. 个人主页 / 设置 / 好友 / 后台
     ------------------------------------------------------------ */
  .profile-head {
    flex-direction: column; align-items: stretch;
    gap: 12px; padding: 0 16px; margin-top: -40px;
  }
  /* 关键：不把 profile-head-actions 设成纵向拉伸，里面的 .btn 会被
     align-items:stretch 拉成和统计块等高 → 圆角 999px 直接变成两个大圆圈 */
  .profile-head-actions {
    flex-direction: column; align-items: stretch; gap: 12px;
    width: 100%; padding: 14px 0 2px;
    border-top: 1px solid var(--card-line);
  }
  .profile-stats {
    justify-content: space-between; gap: 0;
    margin: 0; padding: 0; border-top: none;
  }
  .profile-head-actions .action-row { width: 100%; gap: 10px; }
  .profile-head-actions .action-row .btn { flex: 1 1 0; min-width: 0; }

  .profile-head-left { padding-bottom: 0; }
  .profile-head h1 { font-size: 20px; }
  .profile-body { grid-template-columns: 1fr; gap: 12px; }
  .action-row { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .settings-layout, .friend-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .settings-layout > *, .friend-layout > * { min-width: 0; }
  /* 防止 <select> 里最长选项把整张卡片的 min-content 撑出屏幕（360px 窄屏实测 367px 出血） */
  .card { min-width: 0; max-width: 100%; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  /* 头像上传行：预览 + 表单一左一右，窄屏必须换行，否则表单被挤出屏幕 */
  .avatar-upload-row { flex-wrap: wrap; gap: 12px; }
  .avatar-upload-row .form-group { flex: 1 1 100%; min-width: 0; margin-bottom: 0; }
  .form-row { grid-template-columns: 1fr; }
  .admin-side {
    width: 100%; position: static;
    display: flex; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
    padding: 8px; border-radius: var(--radius);
  }
  .admin-side::-webkit-scrollbar { display: none; }
  .admin-side a { white-space: nowrap; padding: 9px 13px; font-size: 13px; }

  /* 表格横向滚动带边缘渐隐提示 */
  .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table th, .data-table td { white-space: nowrap; }

  /* ------------------------------------------------------------
     10. 页脚：两列紧凑，为标签栏留白
     ------------------------------------------------------------ */
  .site-footer { margin-top: 22px; padding: 22px 0 0; }
  .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand .fname { font-size: 15px; }
  .footer-grid h4 { font-size: 13px; margin-bottom: 8px; }
  .footer-grid a { font-size: 12.5px; padding: 3px 0; }
  .footer-bottom {
    font-size: 11.5px; line-height: 1.7;
    /* 底部悬浮 dock 占 8px 外边距 + 62px 高度，再留 26px 呼吸位 */
    padding: 14px 0 calc(var(--m-tab-h) + var(--m-safe) + 34px);
  }

  /* ------------------------------------------------------------
     11. 通用小件
     ------------------------------------------------------------ */
  /* 触控目标：Logo / 次级链接 / 摇一摇按钮补齐到 ≥40px */
  .logo { min-height: 44px; }
  .section-more { min-height: 34px; }
  .card-link { min-height: 34px; }
  .result-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; min-height: 40px;
    font-size: 18px; border-radius: 50%;
  }
  .reshake-btn { min-height: 44px; padding: 11px 26px; }

  .mobile-back-btn { display: inline-flex; }
  .hide-m { display: none !important; }
  .only-m { display: block; }
  .app-notify-popup {
    bottom: calc(var(--m-tab-h) + var(--m-safe) + 10px) !important;
    top: auto !important;
    left: 12px; right: 12px; width: auto;
  }
  .empty-ico { width: 74px; height: 74px; }
  .card.empty { padding: 34px 20px; }
  /* 触控反馈：桌面 hover 上浮在触屏上会「粘住」，改为按压回弹 */
  .card:hover, .quick-item:hover, .nearby-card:hover, .post-box:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
  .card:active, .quick-item:active { transform: scale(.985); }
}

/* ============================================================
   平板档（601–1024px）：同一套 UI，但铺得更开
   ============================================================ */
@media (min-width: 601px) and (max-width: 1024px) {
  :root { --m-gut: 22px; --m-bar-h: 56px; --m-tab-h: 62px; }

  .container { max-width: 860px; }
  .logo span { font-size: 19px; }
  .logo img { height: 34px; }

  /* 标签栏：居中悬浮的液态玻璃胶囊（宽度收窄，更像一个 dock） */
  .m-tabbar {
    left: 50%; right: auto; bottom: calc(12px + var(--m-safe));
    transform: translateX(-50%);
    width: min(560px, calc(100% - 44px));
    height: var(--m-tab-h);
    border-radius: 26px;
  }
  body.chat-open .m-tabbar { transform: translateX(-50%) translateY(calc(100% + 30px)); }
  .main-content { padding-bottom: calc(var(--m-tab-h) + var(--m-safe) + 38px); }
  .footer-bottom { padding-bottom: calc(var(--m-tab-h) + var(--m-safe) + 30px); }

  /* 首页双栏：频道 + 画师并排
     ⚠ 必须写 minmax(0,1fr)：频道条是 overflow-x 的 nowrap 胶囊，
       min-content 会把第一列撑到 620px，第二列只剩 139px。 */
  .home-layout > .side-col:first-of-type {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px;
    align-items: start;
  }
  .home-layout > .side-col > .card { min-width: 0; }
  .home-layout > .side-col:first-of-type .profile-mini {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 14px; text-align: left;
    padding: 14px 16px;
  }
  .home-layout > .side-col:first-of-type .profile-mini .mini-avatar { margin: 0; }
  .home-layout > .side-col:first-of-type .profile-mini .profile-stats {
    margin: 0 0 0 auto; padding: 0; border: none; gap: 18px;
  }

  .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px; }
  .quick-grid { gap: 12px; }
  .quick-item { padding: 16px 8px 14px; font-size: 12.5px; }
  .quick-item .qicon { width: 46px; height: 46px; border-radius: 15px; }
  .quick-item .qicon .icon-svg { width: 21px; height: 21px; }
  .post-imgs img { height: 132px; }
  .msg-layout { height: calc(100dvh - var(--m-chrome) - 14px); }
}

/* 平板宽档：8 个快捷入口排成一行，避免 180px 的巨型格子 */
@media (min-width: 760px) and (max-width: 1024px) {
  .quick-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
  .quick-item { padding: 14px 4px 12px; font-size: 11.5px; }
  .quick-item .qicon { width: 42px; height: 42px; border-radius: 14px; }
  .quick-item .qicon .icon-svg { width: 19px; height: 19px; }
}

/* ============================================================
   手机档（≤600px）：单列 + 紧凑
   ============================================================ */
@media (max-width: 600px) {
  /* 个人卡在手机上冗余（底部「我的」标签已承担），最新画作交给画廊标签 */
  .home-layout > .side-col:first-of-type .profile-mini { display: none; }
  .home-layout > .side-col:last-of-type { display: none; }

  .quick-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .section-head h2 { font-size: 15.5px; }
  .page-head h1 { font-size: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .main-nav { max-height: 84vh; }
}

/* 极窄屏（≤360px） */
@media (max-width: 360px) {
  :root { --m-gut: 11px; }
  .quick-item { padding: 12px 3px 10px; font-size: 11px; }
  .quick-item .qicon { width: 36px; height: 36px; }
  .m-tab { font-size: 10px; }
  .m-tab .icon-svg { width: 19px; height: 19px; }
}

/* ============================================================
   皮肤兼容：简约（minimal）皮肤下的移动端结构件
   这些选择器特异性高于 minimal.css 的同名规则，保证双皮肤一致
   ⚠ 必须锁在 @media 内，否则桌面端简约皮会被这条圆角规则带跑
   ============================================================ */
@media (max-width: 1024px) {
  html[data-skin="minimal"] .site-header {
    background: var(--header-bg);
    border-radius: 0 0 12px 12px;
    box-shadow: none;
    border-bottom: 1px solid var(--card-border);
  }
  html[data-skin="minimal"] .m-tabbar {
    background: var(--card);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 -1px 0 var(--card-border);
  }
  html[data-skin="minimal"] .m-tab.active::before {
    background: var(--primary);
    width: 18px; height: 2px; border-radius: 2px;
  }
  html[data-skin="minimal"] .main-nav {
    background: var(--card);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 28px rgba(24, 32, 48, 0.12);
  }
  html[data-skin="minimal"] .main-nav a.nav-item,
  html[data-skin="minimal"] .mui-link { background: var(--bg-soft); }
  html[data-skin="minimal"] .main-nav a.nav-item.active {
    background: var(--primary-light);
    border-color: var(--card-border);
  }
  html[data-skin="minimal"] .quick-item .qicon .icon-svg { color: var(--primary); }
  html[data-skin="minimal"] .m-tab.active .icon-svg { transform: none; }
}

/* ============================================================
   移动端触控热区扩展
   ------------------------------------------------------------
   帖子作者名、频道标签这类行内链接，视觉上就该是文字大小，
   但手指点不中。用透明伪元素把可点区域撑到 44px，
   视觉完全不变，只扩大命中范围。
   ============================================================ */
@media (max-width: 1024px) {
  .post-user,
  .ch-tag,
  .post-card a,
  .art-card-info a,
  .art-card-meta a {
    position: relative;
  }
  .post-user::after,
  .ch-tag::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
  /* 相邻元素热区不重叠：给行内链接留出垂直间距 */
  .post-head { row-gap: 4px; }
  .ch-tag + .ch-tag { margin-left: 6px; }
}

/* ---------- 触控尺寸补齐（v7.5） ----------
   审计量的是元素自身的盒子，伪元素热区不算数。
   所以这里直接给元素加 padding，再用负 margin 抵消视觉位移，
   做到「看不见的变大」，版面不变但手指点得中。 */
@media (max-width: 1024px) {
  /* 顶栏文字链：28 → 40 */
  .topbar-links > a {
    display: inline-flex; align-items: center;
    min-height: 40px; padding: 0 4px; margin: -6px 0;
  }
  /* 帖子作者名：20 → 40 */
  a.post-user {
    display: inline-flex; align-items: center;
    min-height: 40px; padding: 0 2px; margin: -10px -2px -10px -2px;
  }
  /* 频道标签：23 → 40 */
  a.ch-tag {
    display: inline-flex; align-items: center;
    min-height: 40px; padding-top: 0; padding-bottom: 0;
    margin: -8px 0;
  }
  /* 卡片标题链接：21 → 40 */
  .art-card-info h3 a,
  .post-title a {
    display: inline-flex; align-items: center;
    min-height: 40px; margin: -9px 0;
  }
  /* 分区「进入频道广场」：34 → 44 */
  a.section-more { min-height: 44px; }
  /* 发布按钮：42 → 44 */
  .btn { min-height: 44px; }
  /* 顶栏图标按钮：38 → 44 */
  .nav-toggle, .nav-bell { min-width: 44px; min-height: 44px; }
}

/* 帖子卡片标题 + 「查看与评论」链接：撑到 40px 触控高度 */
@media (max-width: 1024px) {
  .post-title a,
  .post-foot a {
    display: inline-flex; align-items: center;
    min-height: 40px; margin: -9px 0;
  }
  .post-title { line-height: 1.45; }
}