/* 页面与容器 */
page { background: #f5f5f5; }

/* 🔥 组件自身必须占满宽度，且 padding 左右严格相等 */
.container { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; }

/* 🔥 滚动区 padding 左右必须相等，且容器用 box-sizing */
.scroll { width: 100%; box-sizing: border-box; padding: 20rpx 24rpx; }

/* 提示文字 */
.tip { text-align: center; color: #999; font-size: 24rpx; padding: 30rpx 0; }
.empty { display: flex; flex-direction: column; align-items: center; padding-top: 200rpx; color: #999; font-size: 28rpx; }

/* 🔥 卡片 width:100% + box-sizing 使左右边距完全由父容器决定 */
.card { width: 100%; box-sizing: border-box; background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
.time { font-size: 24rpx; color: #999; }
.tag { font-size: 20rpx; padding: 2rpx 14rpx; border-radius: 16rpx; display: inline-block; }
.zhuangtai-daichuli { background: #fff3e0; color: #e65100; }
.zhuangtai-yichufa { background: #e8f5e9; color: #2e7d32; }
.zhuangtai-yibohui { background: #f3e5f5; color: #7b1fa2; }
.zhuangtai-shensuzhong { background: #e3f2fd; color: #1565c0; }
.zhuangtai-weizhi { background: #f0f0f0; color: #888; }
.info { display: block; font-size: 26rpx; color: #333; margin-top: 8rpx; }

/* 弹窗遮罩 */
.modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; display: flex; align-items: flex-end; justify-content: center; }

/* 🔥 弹窗面板 width:100% + box-sizing */
.modal-panel { width: 100%; box-sizing: border-box; max-height: 85vh; background: #fff; border-radius: 24rpx 24rpx 0 0; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 28rpx 30rpx 16rpx; border-bottom: 1px solid #eee; }
.modal-title { font-size: 32rpx; font-weight: 600; }
.modal-close { width: 44rpx; height: 44rpx; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 26rpx; color: #888; }

/* 🔥 内容区左右 padding 严格相等 */
.modal-body { width: 100%; box-sizing: border-box; padding: 20rpx 30rpx; overflow-y: auto; }
.row { display: flex; margin-bottom: 16rpx; }
.lbl { width: 150rpx; font-size: 26rpx; color: #888; flex-shrink: 0; }
.val { flex: 1; font-size: 26rpx; color: #333; word-break: break-all; }
.section { margin: 20rpx 0; }
.sec-title { font-size: 26rpx; color: #888; margin-bottom: 12rpx; display: block; }

/* 🔥 图片网格：gap 均等，无任何额外水平偏移 */
.img-grid { width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 12rpx; }
.img { width: calc((100% - 24rpx) / 3); height: 0; padding-bottom: calc((100% - 24rpx) / 3); border-radius: 10rpx; background: #f0f0f0; display: block; position: relative; }
.img-box { position: relative; width: calc((100% - 24rpx) / 3); height: 0; padding-bottom: calc((100% - 24rpx) / 3); }
.img-box .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 0; }
.img-del { position: absolute; top: -6rpx; right: -6rpx; width: 34rpx; height: 34rpx; background: #e53935; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18rpx; z-index: 2; }
.img-add { width: calc((100% - 24rpx) / 3); height: 0; padding-bottom: calc((100% - 24rpx) / 3); border: 2rpx dashed #ccc; border-radius: 10rpx; display: flex; align-items: center; justify-content: center; font-size: 52rpx; color: #aaa; box-sizing: border-box; position: relative; }

/* 表单 */
.form-group { margin-bottom: 24rpx; }
.textarea { width: 100%; box-sizing: border-box; height: 180rpx; background: #f9f9f9; border-radius: 10rpx; padding: 16rpx; font-size: 26rpx; border: 1px solid #eee; }
.word-count { text-align: right; font-size: 22rpx; color: #bbb; margin-top: 6rpx; }
.progress-box { margin-top: 12rpx; }
.progress-bar { height: 10rpx; background: #eee; border-radius: 5rpx; }
.progress-inner { height: 100%; background: #2e7d32; border-radius: 5rpx; }
.progress-text { font-size: 22rpx; color: #2e7d32; text-align: right; margin-top: 4rpx; }

/* 🔥 底部按钮区左右 padding 严格均等 */
.modal-foot { width: 100%; box-sizing: border-box; display: flex; padding: 16rpx 30rpx 30rpx; gap: 20rpx; border-top: 1px solid #eee; }
.btn { flex: 1; text-align: center; padding: 22rpx 0; border-radius: 16rpx; font-size: 28rpx; font-weight: 600; }
.primary { background: #2e7d32; color: #fff; }
.default { background: #f0f0f0; color: #555; }
.btn:active { opacity: 0.8; }


/* ===== 获取更多按钮 ===== */
.load-more-btn {
    width: 80%;
    margin: 20rpx auto 30rpx;
    padding: 22rpx 0;
    text-align: center;
    background: #ffffff;
    border: 2rpx solid #e0e0e0;
    border-radius: 20rpx;
    color: #555;
    font-size: 26rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02);
    transition: all 0.15s;
  }
  .load-more-btn:active {
    background: #f5f5f5;
    border-color: #2e7d32;
    color: #2e7d32;
  }