/**
 * 手机端 H5 小程序同款主题（与 miniprogram/app.wxss + 各页 wxss 对齐）
 * 仅 html.mp-mobile + max-width:767px 生效
 */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  html.mp-mobile {
    --rpx: calc(100vw / 750);
    --primary: #0d9488;
    --primary-light: #14b8a6;
    --primary-dark: #0f766e;
    --primary-bg: #f0fdfa;
    --text: #1e293b;
    --text-strong: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --card-bg: #ffffff;
    --page-bg: #f8fafc;
    --shadow-sm: 0 calc(2 * var(--rpx)) calc(16 * var(--rpx)) rgba(15, 23, 42, 0.06);
    --shadow-md: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(15, 23, 42, 0.08);
    --radius-sm: calc(12 * var(--rpx));
    --radius-md: calc(20 * var(--rpx));
    --radius-lg: calc(28 * var(--rpx));
    --radius-xl: calc(36 * var(--rpx));

    background-color: var(--page-bg);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: calc(28 * var(--rpx));
    color: var(--text);
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
    overflow-x: hidden;
  }

  html.mp-mobile #mp-app.container,
  html.mp-mobile #mp-app.mp-container {
    box-sizing: border-box;
    min-height: 100vh;
    padding: calc(24 * var(--rpx)) calc(32 * var(--rpx)) calc(env(safe-area-inset-bottom, 0px) + calc(24 * var(--rpx)));
  }

  html.mp-mobile #mp-app.category-feed-page {
    padding: 0;
    min-height: 100vh;
  }

  html.mp-mobile #mp-app.image-page {
    padding: 0 !important;
    min-height: 100vh;
    max-width: none !important;
    width: 100% !important;
  }

  html.mp-mobile .card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  html.mp-mobile .empty,
  html.mp-mobile .loading,
  html.mp-mobile .finished {
    text-align: center;
    padding: calc(64 * var(--rpx)) calc(32 * var(--rpx));
    font-size: calc(28 * var(--rpx));
    color: var(--text-secondary);
  }

  /* ===== Hero ===== */
  html.mp-mobile .hero {
    position: relative;
    height: 45vh;
    min-height: calc(520 * var(--rpx));
    max-height: calc(720 * var(--rpx));
    margin: calc(-24 * var(--rpx)) calc(-32 * var(--rpx)) 0;
    margin-bottom: calc(24 * var(--rpx));
    width: calc(100% + 64 * var(--rpx));
    overflow: hidden;
    background: transparent;
  }

  html.mp-mobile .hero-swiper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  html.mp-mobile .hero-swiper-inner {
    display: flex;
    height: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  html.mp-mobile .hero-swiper-inner::-webkit-scrollbar {
    display: none;
  }

  html.mp-mobile .hero-swiper-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  html.mp-mobile .hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(24 * var(--rpx));
    display: flex;
    justify-content: center;
    gap: calc(8 * var(--rpx));
    z-index: 3;
    pointer-events: none;
  }

  html.mp-mobile .hero-dot {
    width: calc(12 * var(--rpx));
    height: calc(12 * var(--rpx));
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    pointer-events: auto;
    cursor: pointer;
  }

  html.mp-mobile .hero-dot.active {
    background: #fff;
  }

  html.mp-mobile .hero-placeholder {
    position: absolute;
    inset: 0;
    background: var(--border-light);
  }

  html.mp-mobile .hero-fade-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-2 * var(--rpx));
    height: calc(160 * var(--rpx));
    background: linear-gradient(to bottom, transparent 0%, rgba(248, 250, 252, 0.3) 50%, rgba(248, 250, 252, 0.9) 100%);
    pointer-events: none;
    z-index: 1;
  }

  html.mp-mobile .hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: calc(env(safe-area-inset-top, 0px) + calc(28 * var(--rpx))) calc(32 * var(--rpx)) calc(24 * var(--rpx));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.08) 55%, transparent 100%);
    pointer-events: none;
    z-index: 2;
  }

  html.mp-mobile .hero-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    pointer-events: auto;
  }

  html.mp-mobile .hero-brand {
    font-size: calc(36 * var(--rpx));
    font-weight: 600;
    color: #fff;
    margin-right: calc(24 * var(--rpx));
    white-space: nowrap;
    margin-top: calc(-10 * var(--rpx));
  }

  html.mp-mobile .hero-bar-right {
    display: flex;
    align-items: center;
  }

  html.mp-mobile .hero-search {
    flex: 0 0 calc(260 * var(--rpx));
    max-width: calc(260 * var(--rpx));
    height: calc(64 * var(--rpx));
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    padding: 0 calc(24 * var(--rpx));
    box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(15, 23, 42, 0.12);
    text-decoration: none;
    margin-top: calc(-10 * var(--rpx));
    margin-right: calc(20 * var(--rpx));
  }

  html.mp-mobile .hero-search-icon {
    width: calc(32 * var(--rpx));
    height: calc(32 * var(--rpx));
    border-radius: 999px;
    background: #facc15;
    margin-right: calc(14 * var(--rpx));
    flex-shrink: 0;
  }

  html.mp-mobile .hero-search-placeholder {
    font-size: calc(26 * var(--rpx));
    color: rgba(15, 23, 42, 0.76);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html.mp-mobile .banner-slide {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    cursor: pointer;
  }

  html.mp-mobile .banner-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    vertical-align: top;
  }

  html.mp-mobile .banner-video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: #000;
    object-fit: cover;
  }

  html.mp-mobile .banner-mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
  }

  /* ===== 首页导航 ===== */
  html.mp-mobile .home-nav {
    margin-top: calc(-140 * var(--rpx));
    margin-bottom: calc(32 * var(--rpx));
    position: relative;
    z-index: 2;
  }

  html.mp-mobile .home-nav-card {
    border-radius: calc(32 * var(--rpx));
    padding: calc(16 * var(--rpx)) calc(8 * var(--rpx)) calc(8 * var(--rpx));
    overflow: visible;
    box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(15, 23, 42, 0.06);
  }

  html.mp-mobile .home-nav-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  html.mp-mobile .home-nav-item {
    width: 20%;
    flex-shrink: 0;
    padding: calc(16 * var(--rpx)) 0 calc(20 * var(--rpx));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
  }

  html.mp-mobile .home-nav-icon-wrap {
    width: calc(96 * var(--rpx));
    height: calc(96 * var(--rpx));
    border-radius: calc(32 * var(--rpx));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(8 * var(--rpx));
    overflow: hidden;
  }

  html.mp-mobile .home-nav-icon-img {
    width: calc(64 * var(--rpx));
    height: calc(64 * var(--rpx));
    object-fit: cover;
    border-radius: inherit;
  }

  html.mp-mobile .home-nav-icon-placeholder {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 100%);
  }

  html.mp-mobile .home-nav-text {
    font-size: calc(24 * var(--rpx));
    color: var(--text-strong);
    margin-top: calc(4 * var(--rpx));
    text-align: center;
  }

  /* ===== 热点文章 ===== */
  html.mp-mobile .hot-panel {
    margin-bottom: calc(28 * var(--rpx));
    padding: calc(20 * var(--rpx)) calc(24 * var(--rpx)) calc(8 * var(--rpx));
    border-radius: calc(28 * var(--rpx));
  }

  html.mp-mobile .hot-list {
    margin-top: calc(4 * var(--rpx));
  }

  html.mp-mobile .hot-item {
    display: flex;
    align-items: flex-start;
    padding: calc(14 * var(--rpx)) 0;
    text-decoration: none;
    color: inherit;
  }

  html.mp-mobile .hot-item + .hot-item {
    border-top: calc(1 * var(--rpx)) solid var(--border-light);
  }

  html.mp-mobile .hot-dot {
    width: calc(12 * var(--rpx));
    height: calc(12 * var(--rpx));
    border-radius: 999px;
    background: #fb6b5b;
    margin-right: calc(16 * var(--rpx));
    margin-top: calc(18 * var(--rpx));
    flex-shrink: 0;
  }

  html.mp-mobile .hot-item-title {
    flex: 1;
    font-size: calc(26 * var(--rpx));
    color: var(--text-strong);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  html.mp-mobile .hot-item-time {
    margin-left: calc(12 * var(--rpx));
    font-size: calc(22 * var(--rpx));
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ===== 瀑布流 ===== */
  html.mp-mobile .waterfall-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: calc(24 * var(--rpx));
    margin-bottom: calc(32 * var(--rpx));
  }

  html.mp-mobile .waterfall-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--rpx));
  }

  html.mp-mobile .waterfall-item {
    background: #fff;
    border: calc(1 * var(--rpx)) solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 calc(8 * var(--rpx)) calc(22 * var(--rpx)) rgba(15, 23, 42, 0.06);
    text-decoration: none;
    color: inherit;
    display: block;
  }

  html.mp-mobile .waterfall-img-wrap {
    padding: 0;
    background: #fff;
  }

  html.mp-mobile .waterfall-img {
    width: 100%;
    display: block;
    border-radius: 0;
    background: #fff;
  }

  html.mp-mobile .waterfall-text {
    padding: calc(18 * var(--rpx)) calc(20 * var(--rpx)) calc(16 * var(--rpx));
    display: flex;
    flex-direction: column;
  }

  html.mp-mobile .waterfall-title-row {
    padding-bottom: calc(10 * var(--rpx));
    margin-bottom: calc(10 * var(--rpx));
    border-bottom: calc(1 * var(--rpx)) solid #e5e7eb;
  }

  html.mp-mobile .waterfall-title {
    font-size: calc(30 * var(--rpx));
    font-weight: 600;
    color: var(--text-strong);
  }

  html.mp-mobile .waterfall-summary {
    font-size: calc(24 * var(--rpx));
    color: var(--text-secondary);
    margin-bottom: calc(10 * var(--rpx));
  }

  html.mp-mobile .waterfall-author {
    font-size: calc(22 * var(--rpx));
    color: var(--text-muted);
    font-style: italic;
    text-align: right;
    margin-top: calc(8 * var(--rpx));
    align-self: flex-end;
  }

  /* ===== 分类资讯流 ===== */
  html.mp-mobile .category-feed {
    min-height: 100vh;
    background: var(--page-bg);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  html.mp-mobile .tabs-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    background: var(--card-bg);
    border-bottom: calc(1 * var(--rpx)) solid var(--border-light);
    padding: 0 calc(24 * var(--rpx));
    scrollbar-width: none;
  }

  html.mp-mobile .tabs-wrap::-webkit-scrollbar {
    display: none;
  }

  html.mp-mobile .tabs-inner {
    display: inline-flex;
    align-items: center;
    padding: calc(24 * var(--rpx)) 0;
    gap: 0 calc(32 * var(--rpx));
  }

  html.mp-mobile .tab-item {
    display: inline-block;
    font-size: calc(28 * var(--rpx));
    color: var(--text-secondary);
    padding: calc(12 * var(--rpx)) 0;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
  }

  html.mp-mobile .tab-item.active {
    color: var(--primary);
    font-weight: 600;
  }

  html.mp-mobile .tab-item.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(4 * var(--rpx));
    background: var(--primary);
    border-radius: calc(2 * var(--rpx));
  }

  html.mp-mobile .search-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: calc(24 * var(--rpx)) calc(32 * var(--rpx));
    padding: calc(20 * var(--rpx)) calc(28 * var(--rpx));
    background: var(--border-light);
    border-radius: calc(40 * var(--rpx));
    text-decoration: none;
    color: inherit;
  }

  html.mp-mobile .search-bar-input-wrap {
    display: flex;
    align-items: center;
    gap: calc(20 * var(--rpx));
    margin: calc(24 * var(--rpx)) calc(32 * var(--rpx)) calc(28 * var(--rpx));
  }

  html.mp-mobile .search-input {
    flex: 1;
    height: calc(72 * var(--rpx));
    padding: 0 calc(24 * var(--rpx));
    font-size: calc(28 * var(--rpx));
    color: var(--text-strong);
    background: var(--card-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: none;
    outline: none;
    font-family: inherit;
  }

  html.mp-mobile .search-btn {
    padding: 0 calc(32 * var(--rpx));
    height: calc(72 * var(--rpx));
    line-height: calc(72 * var(--rpx));
    font-size: calc(28 * var(--rpx));
    font-weight: 600;
    color: #fff;
    background: var(--primary);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    font-family: inherit;
  }

  html.mp-mobile .search-placeholder {
    font-size: calc(28 * var(--rpx));
    color: var(--text-muted);
  }

  html.mp-mobile .search-icon {
    width: calc(36 * var(--rpx));
    height: calc(36 * var(--rpx));
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  html.mp-mobile .feed-list {
    padding: 0 calc(32 * var(--rpx)) calc(32 * var(--rpx));
  }

  html.mp-mobile .feed-item {
    margin-bottom: calc(24 * var(--rpx));
    padding: calc(28 * var(--rpx));
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
  }

  html.mp-mobile .feed-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(24 * var(--rpx));
  }

  html.mp-mobile .feed-body {
    flex: 1;
    min-width: 0;
  }

  html.mp-mobile .feed-title {
    font-size: calc(30 * var(--rpx));
    color: var(--text-strong);
    font-weight: 500;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  html.mp-mobile .feed-title-block {
    display: block;
    margin-bottom: calc(16 * var(--rpx));
  }

  html.mp-mobile .feed-thumb-wrap {
    flex-shrink: 0;
    width: calc(200 * var(--rpx));
    height: calc(140 * var(--rpx));
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--border-light);
  }

  html.mp-mobile .feed-thumb,
  html.mp-mobile .feed-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  html.mp-mobile .feed-cover-wrap {
    width: 100%;
    height: calc(400 * var(--rpx));
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--border-light);
    margin-bottom: calc(16 * var(--rpx));
  }

  html.mp-mobile .feed-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: calc(16 * var(--rpx));
    font-size: calc(24 * var(--rpx));
    color: var(--text-muted);
  }

  html.mp-mobile .feed-meta-bottom {
    margin-top: 0;
  }

  html.mp-mobile .feed-dot {
    margin: 0 calc(8 * var(--rpx));
  }

  html.mp-mobile .feed-views {
    margin-left: calc(8 * var(--rpx));
  }

  html.mp-mobile .feed-summary {
    font-size: calc(26 * var(--rpx));
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: calc(12 * var(--rpx));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ===== 文章详情 ===== */
  html.mp-mobile .article-header {
    margin-bottom: calc(28 * var(--rpx));
  }

  html.mp-mobile .article-header .title {
    font-size: calc(42 * var(--rpx));
    font-weight: 600;
    color: var(--text-strong);
    line-height: 1.35;
    display: block;
    margin-bottom: calc(20 * var(--rpx));
  }

  html.mp-mobile .article-header .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(16 * var(--rpx));
    font-size: calc(24 * var(--rpx));
  }

  html.mp-mobile .article-header .tag.category {
    padding: calc(8 * var(--rpx)) calc(18 * var(--rpx));
    border-radius: 999px;
    background: var(--primary-bg);
    color: var(--primary);
    font-weight: 500;
  }

  html.mp-mobile .article-header .date,
  html.mp-mobile .article-header .views {
    color: var(--text-muted);
  }

  html.mp-mobile .article-body {
    font-size: calc(30 * var(--rpx));
    line-height: 1.85;
    color: var(--text);
  }

  html.mp-mobile .article-body .rich-content {
    word-break: break-word;
    overflow: hidden;
  }

  html.mp-mobile .article-body .rich-content img {
    max-width: 100% !important;
    height: auto !important;
  }

  html.mp-mobile .article-attachments {
    margin-top: calc(36 * var(--rpx));
    padding-top: calc(28 * var(--rpx));
    border-top: calc(1 * var(--rpx)) solid rgba(15, 23, 42, 0.08);
  }

  html.mp-mobile .article-attachments-title {
    font-size: calc(28 * var(--rpx));
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: calc(16 * var(--rpx));
  }

  html.mp-mobile .article-att-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(20 * var(--rpx));
    padding: calc(22 * var(--rpx)) calc(24 * var(--rpx));
    margin-bottom: calc(16 * var(--rpx));
    background: var(--primary-bg);
    border-radius: calc(12 * var(--rpx));
    border: calc(1 * var(--rpx)) solid rgba(15, 118, 110, 0.2);
    text-decoration: none;
    color: inherit;
  }

  html.mp-mobile .article-att-name {
    flex: 1;
    font-size: calc(28 * var(--rpx));
    color: var(--primary);
    line-height: 1.45;
    word-break: break-all;
  }

  html.mp-mobile .article-att-hint {
    flex-shrink: 0;
    font-size: calc(24 * var(--rpx));
    color: var(--text-muted);
  }

  html.mp-mobile .loading-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
  }

  /* ===== 搜索列表 ===== */
  html.mp-mobile .empty-tip {
    text-align: center;
    padding: calc(80 * var(--rpx)) calc(32 * var(--rpx));
    font-size: calc(28 * var(--rpx));
    color: var(--text-muted);
  }

  html.mp-mobile .list .item {
    margin-bottom: calc(28 * var(--rpx));
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
  }

  html.mp-mobile .item-cover-wrap {
    width: 100%;
    height: calc(340 * var(--rpx));
    background: var(--border-light);
    overflow: hidden;
  }

  html.mp-mobile .list .item .cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  html.mp-mobile .cover-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--border-light) 0%, #e2e8f0 100%);
  }

  html.mp-mobile .list .item .body {
    padding: calc(28 * var(--rpx));
  }

  html.mp-mobile .list .item .title {
    font-size: calc(32 * var(--rpx));
    font-weight: 600;
    color: var(--text-strong);
    display: block;
    margin-bottom: calc(14 * var(--rpx));
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  html.mp-mobile .list .item .summary {
    font-size: calc(26 * var(--rpx));
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.55;
  }

  html.mp-mobile .list .item .meta {
    margin-top: calc(20 * var(--rpx));
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: calc(24 * var(--rpx));
  }

  html.mp-mobile .list .item .tag.category {
    padding: calc(6 * var(--rpx)) calc(16 * var(--rpx));
    border-radius: 999px;
    background: var(--primary-bg);
    color: var(--primary);
    font-weight: 500;
  }

  html.mp-mobile .list .item .date {
    color: var(--text-muted);
  }

  /* ===== 图集页分类 Tab ===== */
  html.mp-mobile #mp-app.container-img-page {
    padding: calc(12 * var(--rpx)) calc(32 * var(--rpx)) calc(env(safe-area-inset-bottom, 0px) + calc(120 * var(--rpx)));
  }

  html.mp-mobile .container-img-page {
    padding-top: calc(12 * var(--rpx));
  }

  html.mp-mobile .img-top-bar {
    background: var(--page-bg);
    margin-left: calc(-32 * var(--rpx));
    margin-right: calc(-32 * var(--rpx));
    margin-bottom: calc(20 * var(--rpx));
    padding: 0 calc(32 * var(--rpx)) calc(16 * var(--rpx));
  }

  html.mp-mobile .cat-tabs-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
  }

  html.mp-mobile .cat-tabs-inner {
    display: inline-flex;
    align-items: center;
    padding: 0 calc(8 * var(--rpx)) calc(12 * var(--rpx));
  }

  html.mp-mobile .cat-tab {
    display: inline-flex;
    padding: calc(16 * var(--rpx)) calc(28 * var(--rpx));
    font-size: calc(28 * var(--rpx));
    color: var(--text-muted);
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
  }

  html.mp-mobile .cat-tab.active {
    color: var(--primary);
    font-weight: 600;
  }

  html.mp-mobile .cat-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: calc(-24 * var(--rpx));
    width: calc(48 * var(--rpx));
    height: calc(4 * var(--rpx));
    border-radius: calc(2 * var(--rpx));
    background: var(--primary);
  }

  /* ===== 关于页 ===== */
  html.mp-mobile .about-card {
    text-align: center;
    padding: calc(56 * var(--rpx)) calc(40 * var(--rpx));
    margin-bottom: calc(28 * var(--rpx));
    border-radius: var(--radius-lg);
  }

  html.mp-mobile .logo {
    display: inline-block;
    width: calc(128 * var(--rpx));
    height: calc(128 * var(--rpx));
    line-height: calc(128 * var(--rpx));
    border-radius: calc(28 * var(--rpx));
    background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
    color: #fff;
    font-size: calc(38 * var(--rpx));
    font-weight: 600;
    box-shadow: 0 calc(12 * var(--rpx)) calc(32 * var(--rpx)) rgba(13, 148, 136, 0.25);
  }

  html.mp-mobile .site-name {
    display: block;
    font-size: calc(38 * var(--rpx));
    font-weight: 600;
    color: var(--text-strong);
    margin: calc(28 * var(--rpx)) 0 calc(14 * var(--rpx));
  }

  html.mp-mobile .site-desc {
    font-size: calc(28 * var(--rpx));
    color: var(--text-secondary);
    line-height: 1.6;
  }

  html.mp-mobile .notice {
    padding: calc(36 * var(--rpx)) calc(32 * var(--rpx));
  }

  html.mp-mobile .notice-title {
    display: block;
    font-size: calc(30 * var(--rpx));
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: calc(18 * var(--rpx));
  }

  html.mp-mobile .notice-text {
    font-size: calc(26 * var(--rpx));
    color: var(--text-secondary);
    line-height: 1.75;
    white-space: pre-wrap;
  }

  /* ===== 图片分类列表 ===== */
  html.mp-mobile .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: calc(24 * var(--rpx));
    padding: 0 calc(4 * var(--rpx));
  }

  html.mp-mobile .section-title {
    font-size: calc(36 * var(--rpx));
    font-weight: 600;
    color: var(--text-strong);
  }

  html.mp-mobile .section-count {
    font-size: calc(24 * var(--rpx));
    color: var(--text-muted);
  }

  html.mp-mobile .category-list .category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(32 * var(--rpx)) calc(28 * var(--rpx));
    margin-bottom: calc(20 * var(--rpx));
    text-decoration: none;
    color: inherit;
  }

  html.mp-mobile .category-item .name {
    font-size: calc(30 * var(--rpx));
    color: var(--text-strong);
    font-weight: 500;
  }

  html.mp-mobile .category-item .arrow {
    font-size: calc(36 * var(--rpx));
    color: var(--text-muted);
    font-weight: 300;
  }

  /* ===== 公告 / 全屏广告 ===== */
  html.mp-mobile .announcement-mask,
  html.mp-mobile .fullscreen-ad-mask {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 calc(20 * var(--rpx));
    box-sizing: border-box;
  }

  html.mp-mobile .fullscreen-ad-mask {
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    padding: 0;
  }

  html.mp-mobile .announcement-box {
    width: 100%;
    max-height: 82vh;
    border-radius: calc(16 * var(--rpx));
    background: #fff;
    box-shadow: 0 calc(24 * var(--rpx)) calc(60 * var(--rpx)) rgba(15, 23, 42, 0.32);
    position: relative;
    padding: calc(40 * var(--rpx)) calc(32 * var(--rpx)) calc(30 * var(--rpx));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  html.mp-mobile .announcement-box--media {
    background: transparent;
    box-shadow: none;
    padding-top: calc(56 * var(--rpx));
  }

  html.mp-mobile .announcement-close {
    position: absolute;
    top: calc(-100 * var(--rpx));
    left: 50%;
    transform: translateX(-50%);
    width: calc(88 * var(--rpx));
    height: calc(88 * var(--rpx));
    line-height: calc(88 * var(--rpx));
    text-align: center;
    font-size: calc(64 * var(--rpx));
    color: #4b5563;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    border: none;
  }

  html.mp-mobile .announcement-title {
    display: block;
    font-size: calc(48 * var(--rpx));
    color: #111827;
    text-align: center;
    margin-bottom: calc(24 * var(--rpx));
  }

  html.mp-mobile .announcement-content-inner {
    font-size: calc(36 * var(--rpx));
    color: #4b5563;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
  }

  html.mp-mobile .announcement-primary-btn {
    margin-top: calc(24 * var(--rpx));
    width: 100%;
    height: calc(88 * var(--rpx));
    border-radius: calc(16 * var(--rpx));
    background: #07c160;
    color: #fff;
    font-size: calc(30 * var(--rpx));
    border: none;
    cursor: pointer;
    font-family: inherit;
  }

  html.mp-mobile .announcement-poster {
    width: 100%;
    display: block;
    border-radius: calc(16 * var(--rpx));
  }

  html.mp-mobile .fullscreen-ad-wrap {
    width: 100%;
    height: 100%;
    position: relative;
  }

  html.mp-mobile .fullscreen-ad-skip {
    position: absolute;
    top: calc(60 * var(--rpx));
    right: calc(32 * var(--rpx));
    padding: calc(12 * var(--rpx)) calc(28 * var(--rpx));
    font-size: calc(28 * var(--rpx));
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.4);
    border-radius: 999px;
    z-index: 10;
    cursor: pointer;
    border: none;
    font-family: inherit;
  }

  html.mp-mobile .fullscreen-ad-countdown {
    position: absolute;
    top: calc(60 * var(--rpx));
    left: calc(32 * var(--rpx));
    font-size: calc(26 * var(--rpx));
    color: rgba(255, 255, 255, 0.85);
    z-index: 10;
  }

  /* ===== 底部导航（custom-nav） ===== */
  html.mp-mobile .mp-nav-spacer {
    height: calc(env(safe-area-inset-bottom, 0px) + calc(120 * var(--rpx)));
  }

  html.mp-mobile .mp-nav-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: calc(12 * var(--rpx)) calc(24 * var(--rpx)) calc(env(safe-area-inset-bottom, 0px) + calc(12 * var(--rpx)));
    pointer-events: none;
    z-index: 999;
  }

  html.mp-mobile .mp-nav-bar {
    margin: 0 auto;
    max-width: calc(640 * var(--rpx));
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
    padding: calc(8 * var(--rpx)) calc(16 * var(--rpx)) calc(10 * var(--rpx));
    pointer-events: auto;
  }

  html.mp-mobile .mp-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: calc(72 * var(--rpx));
  }

  html.mp-mobile .mp-nav-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(64 * var(--rpx));
    text-decoration: none;
    color: inherit;
  }

  html.mp-mobile .mp-nav-item-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  html.mp-mobile .mp-nav-icon-img {
    width: calc(40 * var(--rpx));
    height: calc(40 * var(--rpx));
    margin-bottom: calc(6 * var(--rpx));
    opacity: 0.7;
  }

  html.mp-mobile .mp-nav-item.active .mp-nav-icon-img {
    opacity: 1;
  }

  html.mp-mobile .mp-nav-icon-ph {
    width: calc(40 * var(--rpx));
    height: calc(40 * var(--rpx));
    margin-bottom: calc(6 * var(--rpx));
    border-radius: calc(10 * var(--rpx));
    background: #94a3b8;
  }

  html.mp-mobile .mp-nav-item.active .mp-nav-icon-ph {
    background: #0f766e;
  }

  html.mp-mobile .mp-nav-text {
    font-size: calc(20 * var(--rpx));
    color: #64748b;
    line-height: 1.25;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.mp-mobile .mp-nav-item.active .mp-nav-text {
    color: #0f766e;
    font-weight: 600;
  }

  html.mp-mobile .mp-nav-fab {
    flex: 0 0 auto;
    width: calc(72 * var(--rpx));
    height: calc(72 * var(--rpx));
    border-radius: 50%;
    background: #0f766e;
    box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(31, 41, 55, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 calc(4 * var(--rpx));
    text-decoration: none;
    color: #fff;
    font-size: calc(40 * var(--rpx));
    font-weight: 300;
    line-height: 1;
  }

  /* ===== 电话本 ===== */
  html.mp-mobile .phonebook-cat-grid-wrap {
    margin-bottom: calc(24 * var(--rpx));
    padding: calc(24 * var(--rpx)) calc(16 * var(--rpx));
  }

  html.mp-mobile .phonebook-cat-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  html.mp-mobile .phonebook-cat-grid-item {
    width: 25%;
    border: none;
    background: none;
    padding: calc(12 * var(--rpx)) 0 calc(16 * var(--rpx));
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: inherit;
    cursor: pointer;
  }

  html.mp-mobile .phonebook-cat-grid-item.active .phonebook-cat-icon {
    box-shadow: 0 0 0 calc(4 * var(--rpx)) rgba(15, 118, 110, 0.4);
  }

  html.mp-mobile .phonebook-cat-icon {
    width: calc(96 * var(--rpx));
    height: calc(96 * var(--rpx));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(12 * var(--rpx));
  }

  html.mp-mobile .phonebook-cat-icon-text {
    font-size: calc(36 * var(--rpx));
    font-weight: 600;
    color: #fff;
  }

  html.mp-mobile .phonebook-cat-label {
    font-size: calc(24 * var(--rpx));
    color: var(--text-strong);
    text-align: center;
  }

  html.mp-mobile .phonebook-search {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--rpx));
    margin-bottom: calc(20 * var(--rpx));
  }

  html.mp-mobile .phonebook-input {
    flex: 1;
    height: calc(72 * var(--rpx));
    padding: 0 calc(20 * var(--rpx));
    border-radius: 999px;
    background: #f1f5f9;
    border: none;
    font-size: calc(26 * var(--rpx));
    font-family: inherit;
  }

  html.mp-mobile .phonebook-btn {
    padding: 0 calc(26 * var(--rpx));
    height: calc(72 * var(--rpx));
    line-height: calc(72 * var(--rpx));
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    border: none;
    font-size: calc(26 * var(--rpx));
    font-family: inherit;
    cursor: pointer;
  }

  html.mp-mobile .phonebook-list {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--rpx));
  }

  html.mp-mobile .phonebook-item {
    display: flex;
    align-items: flex-start;
    gap: calc(16 * var(--rpx));
    padding: calc(24 * var(--rpx));
  }

  html.mp-mobile .phonebook-avatar {
    width: calc(72 * var(--rpx));
    height: calc(72 * var(--rpx));
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  html.mp-mobile .phonebook-avatar-text {
    font-size: calc(28 * var(--rpx));
    font-weight: 600;
    color: #1f2933;
  }

  html.mp-mobile .phonebook-content {
    flex: 1;
    min-width: 0;
  }

  html.mp-mobile .phonebook-name {
    display: block;
    font-size: calc(30 * var(--rpx));
    font-weight: 600;
    color: var(--text-strong);
  }

  html.mp-mobile .phonebook-phone {
    display: block;
    font-size: calc(26 * var(--rpx));
    color: #4b5563;
    margin-top: calc(4 * var(--rpx));
  }

  html.mp-mobile .phonebook-desc {
    font-size: calc(24 * var(--rpx));
    color: var(--text-secondary);
    margin-top: calc(6 * var(--rpx));
  }

  html.mp-mobile .phonebook-category {
    font-size: calc(22 * var(--rpx));
    color: var(--text-muted);
    font-style: italic;
  }

  html.mp-mobile .phonebook-call-btn {
    width: calc(72 * var(--rpx));
    height: calc(72 * var(--rpx));
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    display: block;
    position: relative;
  }

  html.mp-mobile .phonebook-call-btn::after {
    content: "";
    position: absolute;
    inset: calc(18 * var(--rpx));
    border: calc(3 * var(--rpx)) solid #fff;
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    transform: rotate(-45deg);
  }

  /* ===== 寻人寻物列表 ===== */
  html.mp-mobile .mp-laf-list-page {
    padding-left: calc(32 * var(--rpx));
    padding-right: calc(32 * var(--rpx));
    background: #fafafa;
  }

  html.mp-mobile .laf-hero {
    padding: calc(40 * var(--rpx)) 0 calc(32 * var(--rpx));
    text-align: center;
  }

  html.mp-mobile .laf-hero-title {
    font-size: calc(44 * var(--rpx));
    font-weight: 700;
    color: #0f172a;
    margin-bottom: calc(12 * var(--rpx));
  }

  html.mp-mobile .laf-hero-desc {
    font-size: calc(26 * var(--rpx));
    color: #64748b;
  }

  html.mp-mobile .laf-tabs-inner {
    display: flex;
    flex-wrap: wrap;
    gap: calc(16 * var(--rpx));
    margin-bottom: calc(28 * var(--rpx));
  }

  html.mp-mobile .laf-tab-pill {
    padding: calc(18 * var(--rpx)) calc(32 * var(--rpx));
    font-size: calc(28 * var(--rpx));
    color: #64748b;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    border: none;
    box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0, 0, 0, 0.04);
    font-family: inherit;
    cursor: pointer;
  }

  html.mp-mobile .laf-tab-pill.active {
    color: #fff;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    font-weight: 600;
  }

  html.mp-mobile .laf-list {
    padding-top: calc(16 * var(--rpx));
  }

  html.mp-mobile .laf-item {
    display: flex;
    background: #fff;
    margin-bottom: calc(24 * var(--rpx));
    box-shadow: 0 calc(1 * var(--rpx)) calc(4 * var(--rpx)) rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
  }

  html.mp-mobile .laf-item-thumb {
    width: calc(200 * var(--rpx));
    min-height: calc(200 * var(--rpx));
    flex-shrink: 0;
    background: #f0f0f0;
  }

  html.mp-mobile .laf-item-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: calc(200 * var(--rpx));
  }

  html.mp-mobile .laf-item-thumb-ph {
    width: 100%;
    height: 100%;
    min-height: calc(200 * var(--rpx));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(26 * var(--rpx));
    color: #999;
  }

  html.mp-mobile .laf-item-body {
    flex: 1;
    padding: calc(28 * var(--rpx)) calc(24 * var(--rpx));
    min-width: 0;
  }

  html.mp-mobile .laf-item-meta {
    margin-bottom: calc(20 * var(--rpx));
    font-size: calc(24 * var(--rpx));
    color: #666;
  }

  html.mp-mobile .laf-item-type {
    margin-right: calc(24 * var(--rpx));
  }

  html.mp-mobile .laf-item-date {
    color: #999;
  }

  html.mp-mobile .laf-item-desc {
    font-size: calc(30 * var(--rpx));
    color: #333;
    line-height: 1.6;
    margin-bottom: calc(28 * var(--rpx));
  }

  html.mp-mobile .laf-item-action {
    font-size: calc(28 * var(--rpx));
    color: #666;
    text-align: right;
    padding-top: calc(16 * var(--rpx));
    border-top: calc(1 * var(--rpx)) solid #f0f0f0;
  }

  /* ===== 寻人寻物详情 ===== */
  html.mp-mobile .laf-page {
    min-height: 100vh;
    margin: calc(-24 * var(--rpx)) calc(-32 * var(--rpx));
    padding: calc(60 * var(--rpx)) calc(32 * var(--rpx)) calc(120 * var(--rpx));
    box-sizing: border-box;
  }

  html.mp-mobile .laf-page.laf-find-person {
    background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
  }

  html.mp-mobile .laf-page.laf-lost {
    background: linear-gradient(180deg, #f5f3ff 0%, #f0eafe 100%);
  }

  html.mp-mobile .laf-page.laf-found {
    background: linear-gradient(180deg, #f0fff4 0%, #dcfce7 100%);
  }

  html.mp-mobile .laf-container {
    background: rgba(255, 255, 255, 0.72);
    border-radius: calc(40 * var(--rpx));
    padding: calc(48 * var(--rpx)) calc(40 * var(--rpx));
    box-shadow: 0 calc(20 * var(--rpx)) calc(80 * var(--rpx)) rgba(15, 23, 42, 0.08);
    border: calc(2 * var(--rpx)) solid rgba(255, 255, 255, 0.9);
  }

  html.mp-mobile .laf-header {
    text-align: center;
    margin-bottom: calc(48 * var(--rpx));
    padding-bottom: calc(24 * var(--rpx));
    border-bottom: calc(2 * var(--rpx)) solid rgba(159, 122, 234, 0.12);
  }

  html.mp-mobile .laf-header-title {
    font-size: calc(44 * var(--rpx));
    font-weight: 600;
    margin-bottom: calc(12 * var(--rpx));
    color: #0f766e;
  }

  html.mp-mobile .laf-header-desc {
    font-size: calc(24 * var(--rpx));
    color: #718096;
  }

  html.mp-mobile .laf-tag {
    display: inline-block;
    padding: calc(8 * var(--rpx)) calc(20 * var(--rpx));
    border-radius: 999px;
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
    font-size: calc(24 * var(--rpx));
    margin-bottom: calc(24 * var(--rpx));
  }

  html.mp-mobile .laf-row {
    display: flex;
    padding: calc(20 * var(--rpx)) 0;
    border-bottom: calc(1 * var(--rpx)) solid rgba(15, 23, 42, 0.06);
    gap: calc(16 * var(--rpx));
  }

  html.mp-mobile .laf-label {
    flex: 0 0 calc(160 * var(--rpx));
    font-size: calc(26 * var(--rpx));
    color: #64748b;
  }

  html.mp-mobile .laf-value {
    flex: 1;
    font-size: calc(28 * var(--rpx));
    color: #0f172a;
    line-height: 1.5;
  }

  html.mp-mobile .laf-value-block {
    white-space: pre-wrap;
  }

  html.mp-mobile .laf-photo {
    width: 100%;
    border-radius: calc(16 * var(--rpx));
    display: block;
  }

  html.mp-mobile .laf-photo-label {
    font-size: calc(26 * var(--rpx));
    color: #64748b;
    margin: calc(24 * var(--rpx)) 0 calc(12 * var(--rpx));
  }

  html.mp-mobile .laf-contact-row {
    display: block;
    padding: calc(20 * var(--rpx));
    background: rgba(13, 148, 136, 0.08);
    border-radius: calc(12 * var(--rpx));
    text-decoration: none;
    color: #0f766e;
    font-size: calc(28 * var(--rpx));
    margin-top: calc(16 * var(--rpx));
  }

  html.mp-mobile .laf-btn-group {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--rpx));
    margin-top: calc(32 * var(--rpx));
  }

  html.mp-mobile .laf-btn {
    display: block;
    text-align: center;
    padding: calc(24 * var(--rpx));
    border-radius: calc(16 * var(--rpx));
    font-size: calc(30 * var(--rpx));
    text-decoration: none;
    font-weight: 600;
  }

  html.mp-mobile .laf-btn-success {
    background: #0f766e;
    color: #fff;
  }

  html.mp-mobile .laf-btn-primary {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: #fff;
    border: none;
  }

  html.mp-mobile .laf-btn-secondary {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-strong);
    border: calc(1 * var(--rpx)) solid var(--border);
  }

  html.mp-mobile .laf-contact-icon {
    margin-right: calc(8 * var(--rpx));
  }

  html.mp-mobile .notice-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    color: var(--text-secondary);
    gap: calc(16 * var(--rpx));
  }

  html.mp-mobile .notice-loading-dot {
    width: calc(16 * var(--rpx));
    height: calc(16 * var(--rpx));
    border-radius: 50%;
    background: var(--primary);
    animation: mp-pulse 1s ease-in-out infinite;
  }

  @keyframes mp-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1); }
  }

  /* 图集详情（与 miniprogram/pages/image 一致） */
  html.mp-mobile #mp-app.image-page,
  html.mp-mobile .image-page {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10000;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  html.mp-mobile body.mp-image-detail-mode,
  html.mp-mobile.mp-image-detail-mode body {
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  html.mp-mobile body.mp-image-detail-mode .mp-nav-wrap,
  html.mp-mobile body.mp-image-detail-mode .mp-nav-spacer,
  html.mp-mobile.mp-image-detail-mode .mp-nav-wrap,
  html.mp-mobile.mp-image-detail-mode .mp-nav-spacer {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  html.mp-mobile .image-page .header-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(24 * var(--rpx));
    padding-top: calc(env(safe-area-inset-top, 0px) + calc(99 * var(--rpx)));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 100%);
    pointer-events: none;
  }

  html.mp-mobile .image-page .header-back {
    pointer-events: auto;
    width: calc(64 * var(--rpx));
    height: calc(64 * var(--rpx));
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  html.mp-mobile .image-page .header-back-arrow {
    color: #fff;
    font-size: calc(44 * var(--rpx));
    line-height: 1;
    margin-top: calc(-6 * var(--rpx));
  }

  html.mp-mobile .image-page .vertical-swiper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  html.mp-mobile .image-page .vertical-swiper-item {
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
  }

  html.mp-mobile .image-page .post-card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
  }

  html.mp-mobile .image-page .image-swiper-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  html.mp-mobile .image-page .image-swiper,
  html.mp-mobile .image-page .image-swiper-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html.mp-mobile .image-page .image-swiper-inner::-webkit-scrollbar,
  html.mp-mobile .image-page .image-swiper::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  html.mp-mobile .image-page .swiper-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  html.mp-mobile .image-page .slide-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }

  html.mp-mobile .image-page .slide-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: calc(28 * var(--rpx)) calc(32 * var(--rpx)) calc(env(safe-area-inset-bottom, 0px) + calc(40 * var(--rpx)));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 55%, transparent 100%);
    pointer-events: auto;
  }

  html.mp-mobile .image-page .slide-info {
    max-width: 100%;
    padding-right: calc(80 * var(--rpx));
  }

  html.mp-mobile .image-page .slide-title {
    font-size: calc(38 * var(--rpx));
    font-weight: 600;
    color: #fff;
    display: block;
    margin-bottom: calc(16 * var(--rpx));
    line-height: 1.35;
  }

  html.mp-mobile .image-page .slide-desc {
    font-size: calc(28 * var(--rpx));
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
    display: block;
    margin-bottom: calc(20 * var(--rpx));
  }

  html.mp-mobile .image-page .slide-desc-wrap {
    position: relative;
  }

  html.mp-mobile .image-page .slide-desc-inner {
    position: relative;
  }

  html.mp-mobile .image-page .slide-desc--clamped {
    max-height: 5em;
    overflow: hidden;
    display: block;
  }

  html.mp-mobile .image-page .slide-desc--expanded {
    max-height: none;
    display: block;
  }

  html.mp-mobile .image-page .slide-desc-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(120 * var(--rpx));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
    pointer-events: none;
  }

  html.mp-mobile .image-page .slide-toggle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--rpx));
    margin-top: calc(12 * var(--rpx));
    padding: calc(12 * var(--rpx)) 0;
    font-size: calc(26 * var(--rpx));
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
  }

  html.mp-mobile .image-page .slide-toggle-row--bounce {
    animation: mp-slide-toggle-bounce 1.8s ease-in-out infinite;
  }

  @keyframes mp-slide-toggle-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(-8 * var(--rpx))); }
  }

  html.mp-mobile .image-page .slide-meta-divider {
    width: calc(88 * var(--rpx));
    height: calc(2 * var(--rpx));
    background: rgba(255, 255, 255, 0.7);
    border-radius: calc(2 * var(--rpx));
    margin: calc(8 * var(--rpx)) 0 calc(10 * var(--rpx));
  }

  html.mp-mobile .image-page .slide-meta-row {
    margin-top: calc(18 * var(--rpx));
    display: flex;
    align-items: flex-start;
    gap: calc(64 * var(--rpx));
    flex-wrap: wrap;
  }

  html.mp-mobile .image-page .slide-meta-col {
    min-width: calc(120 * var(--rpx));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  html.mp-mobile .image-page .slide-meta-label {
    font-size: calc(22 * var(--rpx));
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.2;
    display: block;
  }

  html.mp-mobile .image-page .slide-meta-value {
    margin-top: calc(4 * var(--rpx));
    font-size: calc(24 * var(--rpx));
    color: #fff;
    line-height: 1.3;
    display: block;
    white-space: nowrap;
  }

  html.mp-mobile .image-page .slide-meta-music {
    cursor: pointer;
  }

  html.mp-mobile .image-page .slide-music-icon {
    display: flex;
    align-items: flex-end;
    gap: calc(6 * var(--rpx));
    height: calc(28 * var(--rpx));
    margin-top: calc(4 * var(--rpx));
  }

  html.mp-mobile .image-page .eq-bar {
    width: calc(8 * var(--rpx));
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: calc(4 * var(--rpx));
  }

  html.mp-mobile .image-page .slide-music-icon--playing .eq-bar {
    animation: mp-eq-pulse 0.8s ease-in-out infinite;
  }

  html.mp-mobile .image-page .slide-music-icon--playing .eq-bar:nth-child(1) {
    height: 60%;
    animation-delay: 0s;
  }

  html.mp-mobile .image-page .slide-music-icon--playing .eq-bar:nth-child(2) {
    height: 100%;
    animation-delay: 0.15s;
  }

  html.mp-mobile .image-page .slide-music-icon--playing .eq-bar:nth-child(3) {
    height: 45%;
    animation-delay: 0.3s;
  }

  @keyframes mp-eq-pulse {
    0%, 100% { transform: scaleY(0.6); }
    50% { transform: scaleY(1); }
  }

  html.mp-mobile .image-page .action-bar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(24 * var(--rpx)) calc(16 * var(--rpx));
    padding-right: calc(calc(16 * var(--rpx)) + env(safe-area-inset-right, 0px));
    background: rgba(0, 0, 0, 0.35);
    border-radius: calc(32 * var(--rpx)) 0 0 calc(32 * var(--rpx));
    gap: calc(8 * var(--rpx));
    pointer-events: auto;
  }

  html.mp-mobile .image-page .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(12 * var(--rpx)) calc(8 * var(--rpx));
    cursor: pointer;
    background: none;
    border: none;
  }

  html.mp-mobile .image-page .action-label {
    font-size: calc(22 * var(--rpx));
    color: rgba(255, 255, 255, 0.95);
    writing-mode: vertical-rl;
    letter-spacing: calc(4 * var(--rpx));
  }

  html.mp-mobile .image-page .loading-wrap {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    gap: calc(12 * var(--rpx));
    color: rgba(255, 255, 255, 0.7);
  }

  html.mp-mobile .mp-toast {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + calc(120 * var(--rpx)));
    transform: translateX(-50%);
    z-index: 10060;
    max-width: 80%;
    padding: calc(20 * var(--rpx)) calc(32 * var(--rpx));
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: calc(26 * var(--rpx));
    border-radius: calc(12 * var(--rpx));
    text-align: center;
    pointer-events: none;
  }

  html.mp-mobile .mp-image-preview-mask {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(32 * var(--rpx));
    box-sizing: border-box;
  }

  html.mp-mobile .mp-image-preview-close {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + calc(24 * var(--rpx)));
    right: calc(24 * var(--rpx));
    width: calc(64 * var(--rpx));
    height: calc(64 * var(--rpx));
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: calc(40 * var(--rpx));
    line-height: 1;
  }

  html.mp-mobile .mp-image-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* 电话本详情 */
  html.mp-mobile .detail-card {
    padding: calc(40 * var(--rpx)) calc(32 * var(--rpx));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  html.mp-mobile .detail-avatar {
    width: calc(120 * var(--rpx));
    height: calc(120 * var(--rpx));
    border-radius: 50%;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(24 * var(--rpx));
  }

  html.mp-mobile .detail-avatar-text {
    font-size: calc(48 * var(--rpx));
    font-weight: 600;
    color: #fff;
  }

  html.mp-mobile .detail-name {
    font-size: calc(36 * var(--rpx));
    font-weight: 600;
    margin-bottom: calc(16 * var(--rpx));
  }

  html.mp-mobile .detail-phone-row {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--rpx));
    margin-bottom: calc(20 * var(--rpx));
  }

  html.mp-mobile .detail-phone {
    font-size: calc(32 * var(--rpx));
    color: var(--primary);
    font-weight: 500;
  }

  html.mp-mobile .detail-copy {
    font-size: calc(26 * var(--rpx));
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: calc(8 * var(--rpx)) calc(20 * var(--rpx));
  }

  html.mp-mobile .detail-meta {
    font-size: calc(26 * var(--rpx));
    color: var(--text-muted);
    margin-bottom: calc(16 * var(--rpx));
  }

  html.mp-mobile .detail-desc {
    font-size: calc(28 * var(--rpx));
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: calc(32 * var(--rpx));
    text-align: left;
    width: 100%;
  }

  html.mp-mobile .detail-call-btn,
  html.mp-mobile .detail-correction-btn {
    display: inline-block;
    min-width: calc(280 * var(--rpx));
    padding: calc(22 * var(--rpx)) calc(48 * var(--rpx));
    border-radius: 999px;
    font-size: calc(30 * var(--rpx));
    text-decoration: none;
    text-align: center;
    margin-top: calc(12 * var(--rpx));
  }

  html.mp-mobile .detail-call-btn {
    background: #22c55e;
    color: #fff;
  }

  html.mp-mobile .detail-correction-btn {
    background: var(--border-light);
    color: var(--text-secondary);
  }

  html.mp-mobile .phonebook-cat-list {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--rpx));
  }

  html.mp-mobile .phonebook-cat-item {
    display: block;
    padding: calc(28 * var(--rpx));
    text-decoration: none;
    color: inherit;
  }

  html.mp-mobile .phonebook-cat-name {
    font-size: calc(30 * var(--rpx));
    font-weight: 500;
  }

  html.mp-mobile .phonebook-item {
    cursor: pointer;
  }

  html.mp-mobile .phonebook-cat-grid-item {
    cursor: pointer;
  }

  /* 视频号 */
  html.mp-mobile .video-list {
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--rpx));
  }

  html.mp-mobile .video-card {
    display: flex;
    gap: calc(20 * var(--rpx));
    padding: calc(16 * var(--rpx));
    background: #fff;
    border-radius: calc(16 * var(--rpx));
    box-shadow: var(--shadow-sm);
  }

  html.mp-mobile .video-cover {
    width: calc(200 * var(--rpx));
    height: calc(120 * var(--rpx));
    border-radius: calc(12 * var(--rpx));
    overflow: hidden;
    background: var(--border-light);
    flex-shrink: 0;
  }

  html.mp-mobile .video-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  html.mp-mobile .video-title {
    font-size: calc(28 * var(--rpx));
    font-weight: 600;
    margin-bottom: calc(8 * var(--rpx));
  }

  html.mp-mobile .video-meta {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--rpx));
    font-size: calc(24 * var(--rpx));
    color: var(--text-muted);
  }

  html.mp-mobile .meta-dot {
    width: calc(8 * var(--rpx));
    height: calc(8 * var(--rpx));
    border-radius: 50%;
    background: var(--primary);
  }

  /* 投稿 / 表单页 */
  html.mp-mobile .contrib-topbar {
    margin: calc(-24 * var(--rpx)) calc(-32 * var(--rpx)) calc(24 * var(--rpx));
    padding: calc(12 * var(--rpx)) calc(32 * var(--rpx));
    background: var(--card-bg);
    border-bottom: calc(1 * var(--rpx)) solid var(--border-light);
  }

  html.mp-mobile .contrib-topbar-inner {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--rpx));
  }

  html.mp-mobile .contrib-back {
    background: none;
    border: none;
    font-size: calc(40 * var(--rpx));
    line-height: 1;
    padding: 0;
  }

  html.mp-mobile .contrib-title {
    font-size: calc(32 * var(--rpx));
    font-weight: 600;
  }

  html.mp-mobile .form-card {
    padding: calc(28 * var(--rpx));
  }

  html.mp-mobile .form-group {
    margin-bottom: calc(24 * var(--rpx));
  }

  html.mp-mobile .form-group .label {
    display: block;
    font-size: calc(26 * var(--rpx));
    color: var(--text-secondary);
    margin-bottom: calc(10 * var(--rpx));
  }

  html.mp-mobile .form-card .input,
  html.mp-mobile .form-card .textarea,
  html.mp-mobile .form-card .picker {
    width: 100%;
    box-sizing: border-box;
    padding: calc(18 * var(--rpx));
    border: calc(1 * var(--rpx)) solid var(--border);
    border-radius: calc(12 * var(--rpx));
    font-size: calc(28 * var(--rpx));
    background: #fff;
  }

  html.mp-mobile .form-card .textarea {
    min-height: calc(160 * var(--rpx));
    resize: vertical;
  }

  html.mp-mobile .btn-submit {
    width: 100%;
    padding: calc(24 * var(--rpx));
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: calc(16 * var(--rpx));
    font-size: calc(30 * var(--rpx));
    font-weight: 600;
  }

  html.mp-mobile .hint {
    margin-top: calc(16 * var(--rpx));
    font-size: calc(24 * var(--rpx));
    color: var(--text-muted);
    text-align: center;
  }

  html.mp-mobile .search-bar {
    display: flex;
    align-items: center;
    margin: calc(24 * var(--rpx)) calc(32 * var(--rpx));
    padding: calc(20 * var(--rpx)) calc(28 * var(--rpx));
    background: var(--border-light);
    border-radius: calc(40 * var(--rpx));
    gap: calc(16 * var(--rpx));
  }

  html.mp-mobile .search-bar .search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: calc(28 * var(--rpx));
    outline: none;
  }

  html.mp-mobile .search-bar .search-btn {
    font-size: calc(28 * var(--rpx));
    color: var(--primary);
    flex-shrink: 0;
    cursor: pointer;
  }

  html.mp-mobile .tab-item {
    cursor: pointer;
  }

  html.mp-mobile .mp-image-gallery img {
    width: 100%;
    display: block;
    margin-bottom: calc(16 * var(--rpx));
    border-radius: calc(8 * var(--rpx));
  }
}