/* ==========================================================================
   文章尾部入口条（下载区下面 / 评分卡片上面）
   --------------------------------------------------------------------------
   外观口径：跟站点现有的深色卡片同一套语言，并且**刻意和星级评分卡拉齐**（它俩上下相邻）：
     · 边框：`rgba(120,120,120,.16)` —— 跟评分卡 `.zsr-card` 里的 border 一模一样，浅色深色通用一条
     · 圆角：`var(--main-radius, 10px)` —— 跟评分卡同源，主题里调圆角两边一起变
     · 底色/文字：跟随子比（body.dark-theme 那套），跟评分卡用的主题变量同一体系
     · 强调色：本站工具类统一的粉 #ff5e89（补档 / 积分 / 这里一致；金色留给评分语义）
     · 服务端直出 HTML，整条零 JS

   安卓兼容（老 WebView / 触屏 / 自家 App 套壳都要能用）：
     · 布局用 flex + margin 分隔，**不用 flex 的 gap**（Chrome 84 以下不认 gap，会挤成一团）
     · 不用 :is()/:where()/inset/clamp()/aspect-ratio/backdrop-filter 这些较新的东西
     · 触屏没有 hover → 悬停效果包在 @media (hover:hover) 里，触屏给 :active 按下反馈
     · 关掉安卓点击时的灰色高亮块，触控目标高度 ≥44px
     · 系统开了"减少动态效果"就不做位移
   ========================================================================== */

.laoshen-entry {
  --le-accent: #ff5e89;
  /* 边框：跟星级评分卡 .zsr-card 完全同一个值，浅色深色通用一条（不再分两套） */
  --le-line: rgba(120, 120, 120, .16);
  --le-line-hover: rgba(255, 94, 137, .5);    /* 悬停只给边框一点粉，不刺眼 */
  --le-bg: rgba(0, 0, 0, .025);
  --le-bg-hover: rgba(128, 128, 128, .07);    /* 底色是中性微亮，不用粉色铺满 */
  --le-text: #1d2327;
  display: flex;
  flex-wrap: wrap;
  margin: 16px -5px 6px;          /* 左右负边距：和每条 5px 外边距配合出 10px 间隔 */
  padding: 0;
}

/* 深色（子比：body 上带 dark-theme / dark）：只换底色和文字；
   边框跟评分卡一样浅深通用一条，所以这里不动它 */
body.dark-theme .laoshen-entry,
body.dark .laoshen-entry {
  --le-bg: rgba(255, 255, 255, .05);
  --le-bg-hover: rgba(255, 255, 255, .09);
  --le-text: #eceff2;
}

.laoshen-entry-a {
  flex: 1 1 200px;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 5px 10px;             /* 分隔靠外边距，不靠 gap */
  min-height: 44px;               /* 触控目标够大（安卓/手指） */
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--le-line);
  border-radius: var(--main-radius, 10px);    /* 跟评分卡同源：主题调圆角两边一起变 */
  background: var(--le-bg);
  color: var(--le-text) !important;        /* 主题对正文 a 有强样式，这里压住它 */
  text-decoration: none !important;
  font-size: 13.5px;
  line-height: 1.25;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /* 安卓点一下不再闪灰块 */
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.laoshen-entry-i {
  flex: 0 0 auto;
  width: 16px;
  margin-right: 8px;
  color: var(--le-accent);
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

.laoshen-entry-t {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 有鼠标（电脑）才有悬停反馈；触屏走下面的 :active
   克制原则：文字颜色一律不变，只是"边框透一点粉 + 底色微微起变化 + 抬起 1px" */
@media (hover: hover) {
  .laoshen-entry-a:hover {
    border-color: var(--le-line-hover);
    background: var(--le-bg-hover);
    transform: translateY(-1px);
  }
}

/* 触屏：按下给个明确但同样克制的反馈（安卓/iOS 都认） */
.laoshen-entry-a:active {
  border-color: var(--le-line-hover);
  background: var(--le-bg-hover);
}

/* 键盘也能看见焦点（老浏览器不支持 :focus-visible 时用 :focus 兜底） */
.laoshen-entry-a:focus { outline: 2px solid var(--le-accent); outline-offset: 2px; }
.laoshen-entry-a:focus:not(:focus-visible) { outline: 0; }
.laoshen-entry-a:focus-visible { outline: 2px solid var(--le-accent); outline-offset: 2px; }

/* 系统开了"减少动态效果"就不做位移（低端机/晕动症友好） */
@media (prefers-reduced-motion: reduce) {
  .laoshen-entry-a { transition: none; }
  .laoshen-entry-a:hover { transform: none; }
}

/* 手机：第一行两个并排、第二行一个铺满（3 个时成立；4 个就自动变 2×2，也不会乱） */
@media (max-width: 768px) {
  .laoshen-entry { margin: 14px -4px 4px; }
  .laoshen-entry-a {
    flex: 1 1 calc(50% - 8px);
    margin: 0 4px 8px;
    padding: 10px 10px;
    font-size: 13px;
  }
  .laoshen-entry-a:last-child:nth-child(odd) { flex-basis: 100%; }
  .laoshen-entry-t { font-size: 12.5px; }
  .laoshen-entry-i { margin-right: 6px; }
}

/* ---------------------------- 「按钮组」积木的按钮样式 ----------------------------
   结构照子比（div.radius > a.an_1.but），但外观我们自己管，两个维度分开：
     类型  实心 solid / 描边 outline / 渐变 grad / 纯文字 text
     颜色  自动 auto（深浅自适应、最不突兀，默认）/ 主题色 theme / 蓝 绿 红 黄 紫
   色值直接抄主题 main.css 那套（b-blue #2997f7 / b-green #12b928 / …），不另造一套。
   选择器写成 .lsm-but.lsm-but（两个类 = 0,2,0）压过子比的 .but（0,1,0）——
   主题样式表有可能排在我们后面，同级会翻车；双类最省事。
   安卓口径同入口条：不用 flex 的 gap，分隔靠外边距。 */
.lsm-but.lsm-but {
  --lsm-c: #818b95;
  --lsm-c2: #a8b1ba;
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: var(--main-radius, 10px);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: opacity .18s ease, background .18s ease, border-color .18s ease;
  vertical-align: middle;
}
.lsm-but > .fa { margin-right: 6px; }
.lsm-but .lsm-noicon { display: none; }

/* 颜色（色值 = 主题那套，粉色是站长点名要的 #ff99cc） */
.lsm-but.lsm-theme { --lsm-c: var(--theme-color, #f04494); --lsm-c2: var(--focus-color, #f04494); }
.lsm-but.lsm-pink { --lsm-c: #ff99cc; --lsm-c2: #ffc2e0; }
.lsm-but.lsm-blue { --lsm-c: #2997f7; --lsm-c2: #5c7cff; }
.lsm-but.lsm-red { --lsm-c: #ff5473; --lsm-c2: #ff7f95; }
.lsm-but.lsm-yellow { --lsm-c: #ff6f06; --lsm-c2: #ff9a4d; }
.lsm-but.lsm-purple { --lsm-c: #d448f5; --lsm-c2: #e07ff7; }

/* 大小 13 / 15 / 17（行高是 1.45 相对值，图标 font-size:inherit 也跟着缩放）。
   这一段要排在"类型"前面 —— 不然「纯文字」那个 6px 内边距会被大号尺寸顶掉 */
.lsm-but.lsm-sm { font-size: 13px; padding: 6px 14px; }
.lsm-but.lsm-md { font-size: 15px; padding: 8px 18px; }
.lsm-but.lsm-lg { font-size: 17px; padding: 10px 24px; }

/* 宽度：自动（lsm-w-auto）不用写，默认就是跟着文字宽；整行那个才需要样式 */
.lsm-but.lsm-w-full { display: block; width: 100%; text-align: center; box-sizing: border-box; }

/* 类型 × 颜色 */
.lsm-but.lsm-solid { background: var(--lsm-c); border-color: var(--lsm-c); color: #fff !important; }
.lsm-but.lsm-grad {
  background-image: linear-gradient(135deg, var(--lsm-c) 0%, var(--lsm-c2) 100%);
  border-color: transparent;
  color: #fff !important;
}
.lsm-but.lsm-outline { background: rgba(128, 128, 128, .06); border-color: currentColor; color: var(--lsm-c) !important; }
.lsm-but.lsm-text { background: transparent; border-color: transparent; padding-left: 6px; padding-right: 6px; color: var(--lsm-c) !important; }

@media (hover: hover) {
  /* 悬停只让边框变主题色（不再整块变淡）。
     这里必须 !important：深色下「自动」那几档的边框色是
     body.dark-theme .lsm-but.lsm-auto.lsm-outline{...}（0,4,1），
     光靠 .lsm-but.lsm-but:hover（0,3,0）压不过 —— 实测过：不加 !important 悬停完全没反应，
     加了之后边框才真的变粉。 */
  .lsm-but.lsm-but:hover { border-color: var(--theme-color, #f04494) !important; }
  /* 纯文字那种本来就没边框，悬停给一层淡淡的底 */
  .lsm-but.lsm-text:hover { border-color: transparent !important; background: rgba(128, 128, 128, .12); }
}
.lsm-but:active { opacity: .85; }

/* 「自动」这一档：不填实色，用的是"中性半透明 + 自适应文字"，深浅两套底，所以最不突兀。
   实心/渐变靠底色和文字反色，描边/文字只用色值，各自给了深浅两版。 */
.lsm-but.lsm-auto.lsm-solid {
  background: rgba(0, 0, 0, .05);
  border-color: rgba(120, 120, 120, .22);
  color: #2b3035 !important;
}
.lsm-but.lsm-auto.lsm-grad {
  background-image: linear-gradient(135deg, rgba(0, 0, 0, .07) 0%, rgba(0, 0, 0, .02) 100%);
  border-color: rgba(120, 120, 120, .18);
  color: #2b3035 !important;
}
.lsm-but.lsm-auto.lsm-outline { background: transparent; border-color: rgba(120, 120, 120, .32); color: #2b3035 !important; }
.lsm-but.lsm-auto.lsm-text { color: #2b3035 !important; }
body.dark-theme .lsm-but.lsm-auto.lsm-solid,
body.dark .lsm-but.lsm-auto.lsm-solid {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .14);
  color: #eceff2 !important;
}
body.dark-theme .lsm-but.lsm-auto.lsm-grad,
body.dark .lsm-but.lsm-auto.lsm-grad {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .03) 100%);
  border-color: rgba(255, 255, 255, .12);
  color: #eceff2 !important;
}
body.dark-theme .lsm-but.lsm-auto.lsm-outline,
body.dark .lsm-but.lsm-auto.lsm-outline {
  border-color: rgba(255, 255, 255, .28);
  color: #e5eef7 !important;
}
body.dark-theme .lsm-but.lsm-auto.lsm-text,
body.dark .lsm-but.lsm-auto.lsm-text { color: #e5eef7 !important; }

@media (max-width: 768px) {
  /* 只有默认那档（中）在手机上略收一点，其余尺寸尊重你选的 */
  .lsm-but.lsm-md { padding: 8px 14px; font-size: 13.5px; }
}

/* ---------------------------- 编辑器「卡片」积木的样式 ----------------------------
   后台「积木」里那条「卡片」用的就是这几个类；不想要了把那条片段删掉即可。

   注意：下面这套 --lsm-* 必须定义在卡片自己身上 —— 卡片是插在正文里的，
   取不到 .laoshen-entry 里那几个 --le-*（之前就是栽在这儿：border/background
   全是无效值，卡片等于没底没边，跟背景融为一体）。
   图标是内联 SVG（品牌色实底 + 白色图形），不依赖主题那套 FontAwesome：
   FA 里没有 B站图标，而且主题哪天换了图标字体版本类名就废了。
   ---------------------------------------------------------------------------- */
.lsm-card {
  --lsm-line: rgba(120, 120, 120, .16);        /* 跟评分卡 / 入口条同一条中性灰 */
  --lsm-line-hover: rgba(255, 94, 137, .5);
  --lsm-bg: #fff;
  --lsm-bg-hover: #fdf8fa;
  --lsm-text: #1d2327;
  --lsm-sub: #787c82;
  display: flex;
  align-items: center;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--lsm-line);
  border-radius: var(--main-radius, 10px);
  background: var(--lsm-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);    /* 只有一点点，主要靠底色和边框分层 */
  color: var(--lsm-text) !important;           /* 主题对正文 a 有强样式，这里压住它 */
  text-decoration: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: border-color .18s ease, background .18s ease;
}

/* 字体一律跟正文走：站长在主题里设了自定义字体（CSF 的 typography 会输出带 !important 的
   font-family），卡片这一层不许另起一套 —— 显式 inherit，免得哪天主题/插件给 a/b/i/em
   单独指定字体时这里跑偏 */
.lsm-card,
.lsm-card b,
.lsm-card i,
.lsm-card em,
.lsm-card span { font-family: inherit; }

/* 深色：子比在 body 上挂 dark-theme（旧版还有 dark）。
   底色**不填**（transparent = 正文底本身，跟评分卡一个路数：靠边框和图标分层），
   这样不管主题深色底是 #323335 还是别的什么色，都不会"对不上"；
   之前写死 #24262b 比正文底还暗 14 级、还偏蓝，就是那时候出的问题。深色下也不给阴影。 */
body.dark-theme .lsm-card,
body.dark .lsm-card {
  --lsm-bg: transparent;
  --lsm-bg-hover: rgba(255, 255, 255, .05);
  --lsm-text: #eceff2;
  --lsm-sub: #a4abb3;
  box-shadow: none;
}

@media (hover: hover) {
  .lsm-card:hover {
    border-color: var(--lsm-line-hover);
    background: var(--lsm-bg-hover);
  }
}
.lsm-card:active { background: var(--lsm-bg-hover); }

/* 图标块：品牌色实底 + 白色图形（图形在 CSS 里，文章里只写一个类名） */
.lsm-card-ico {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin-right: 12px;             /* 分隔靠外边距，不用 flex gap（安卓老内核不认） */
  border-radius: 11px;
  background-color: rgba(128, 128, 128, .16);   /* 没写图标类名时的兜底灰块 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
}

/* ① B站小电视：蓝底 + 白色电视（不带眼睛，两根天线保留） */
.lsm-ico-bilibili {
  background-color: #0092c4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M7.4 5.7 4.9 2.9'/%3E%3Cpath d='M16.6 5.7 19.1 2.9'/%3E%3C/g%3E%3Crect x='3' y='5.1' width='18' height='13.5' rx='3.2' fill='%23fff'/%3E%3C/svg%3E");
}

/* ② 油管：红底 + 白三角（标志本身就是这么个几何） */
.lsm-ico-youtube {
  background-color: #ff0000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.1 7.6 16.9 12 9.1 16.4Z' fill='%23fff'/%3E%3C/svg%3E");
}

/* ③ 其他文章链接（兜底那个）：紫底 + 白文档 + 三条横线 */
.lsm-ico-link {
  background-color: #8a63d2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3.4' width='14' height='17.2' rx='2.6' fill='%23fff'/%3E%3Cg fill='none' stroke='%238a63d2' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8.8 9h6.4'/%3E%3Cpath d='M8.8 12.6h6.4'/%3E%3Cpath d='M8.8 16.2h3.6'/%3E%3C/g%3E%3C/svg%3E");
}

.lsm-card-txt { flex: 1 1 auto; min-width: 0; display: block; }
.lsm-card-txt b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--lsm-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lsm-card-txt i,
.lsm-card-txt em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--lsm-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 右侧那个 › （用 CSS 画，不写进文章 HTML） */
.lsm-card::after {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  border-top: 1.6px solid var(--lsm-sub);
  border-right: 1.6px solid var(--lsm-sub);
  transform: rotate(45deg);
  opacity: .5;
}

@media (max-width: 768px) {
  .lsm-card { padding: 9px 11px; }
  .lsm-card-ico { width: 38px; height: 38px; margin-right: 10px; border-radius: 10px; background-size: 23px 23px; }
}