/* ===========================================================
   神秘点页面样式（沿用首页的液态玻璃风格）
   =========================================================== */

.mystery-hero{ padding:64px 0 48px; }
.mystery-hero .hero-title{ margin-bottom:18px; }

.mystery-grid{
  /* 瀑布流：每张图按自己的比例显示，高矮不一也不会互相拉扯、更不会裁剪 */
  columns:3 260px;
  column-gap:22px;
}
.m-item{
  display:block; width:100%;
  margin:0 0 22px;
  break-inside:avoid;
  overflow:hidden;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(var(--glass-blur)) saturate(170%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(170%);
  box-shadow:var(--glass-shadow), var(--glass-inset);
  transition:transform .3s, box-shadow .3s;
}
.m-item:hover{ transform:translateY(-3px); box-shadow:0 26px 60px rgba(23,32,60,.18), var(--glass-inset); }

.m-preview{
  position:relative;
  aspect-ratio:auto;            /* 高度由图片自己的比例决定 */
  overflow:hidden;
  background:rgba(16,18,26,.06);
  border-bottom:1px solid var(--line-soft);
  display:grid; place-items:center;
}
.m-preview img, .m-preview video{ width:100%; height:auto; display:block; }
.m-preview audio{ width:88%; }

.m-file{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:26px 16px; color:var(--text-mid); text-align:center;
}
.m-file-ext{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.6);
}
.m-file-name{ font-size:12.5px; word-break:break-all; color:var(--text-dim); }

.m-meta{ display:flex; flex-direction:column; gap:4px; padding:14px 16px 0; }
.m-name{
  font-size:13.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.m-sub{ font-size:12px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.m-actions{ display:flex; align-items:center; gap:8px; padding:12px 16px 16px; }
.m-actions .btn{ padding:8px 18px; font-size:12.5px; border-radius:999px; }

/* ---------- 上传区（页面最下方） ---------- */
.mystery-upload{ padding:28px; }
.mystery-foot{ margin-top:22px; }
.mystery-actions{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  margin-top:6px; flex-wrap:wrap;
}
.mystery-actions .btn{ min-width:150px; }

.preview-list .f-name{
  position:absolute; left:0; right:0; bottom:0; padding:4px 7px;
  font-size:10.5px; color:#fff; text-align:right;
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.f-icon{
  display:grid; place-items:center; height:100%;
  font-size:11px; color:var(--text-dim); letter-spacing:.1em;
  background:rgba(255,255,255,.5); text-transform:uppercase;
}

@media (max-width: 560px){
  .mystery-hero{ padding:44px 0 36px; }
  .mystery-grid{ columns:1; column-gap:0; }
  .m-item{ margin-bottom:16px; }
  .mystery-upload{ padding:20px; }
  .mystery-actions .btn{ flex:1 1 auto; min-width:0; }
}