/* =========================================================
   已读文章标识
   小圆点 + 对勾，叠加在缩略图（.item-thumbnail）左上角
   同时适配：
   - 竖排列表 .posts-mini .item-thumbnail
   - 横向卡片 / 主题刊目 / Swiper .posts-item.card .item-thumbnail
   ========================================================= */

.item-thumbnail {
  position: relative; /* 主题内大概率已是 relative，这里做兜底，不会有副作用 */
}

.read-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  /* 优先取主题色变量，取不到时用兜底色，可自行改成主题设置里的色值 */
  background: var(--theme-color, var(--main-color, #6c5ce7));
  z-index: 5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  /* 开启鼠标事件，这样才能 hover 出 title="已读" 的提示；
     徽标本身很小，即使盖住缩略图一角，对点击跳转影响也可忽略 */
  pointer-events: auto;
  cursor: default;
}

/* 用纯 CSS 画对勾：一个矩形保留右边框+下边框，旋转45度即成"✓"，
   用 top/left:50% + transform 直接定位在圆心，不存在 SVG 路径本身
   不对称导致的"看起来偏"的问题，居中效果稳定可控 */
.read-badge::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -65%) rotate(45deg);
}

/* 横向 / 主题刊目大卡片，缩略图尺寸更大，徽标相应放大一档 */
.posts-item.card .read-badge {
  bottom: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
}
.posts-item.card .read-badge::after {
  width: 7px;
  height: 11px;
}