/* =========================================================================
   v3.308「只看某种格式」（筛选）：颜色（只看字色）/ 加粗 / 下划线 / 只看图片
   只装这个功能用到的几条规则 —— 不改 app.303.css 里任何老规则，出问题删掉这一行 link 就干净了。
   大站正文（#mlist / .ffrow）和「我的笔记」（#nbList / 同样 .ffrow）共用这一份。
   ========================================================================= */

/* 搜索框 + 「☰ 筛选」同一行 */
.ffrow{display:flex;gap:6px;align-items:stretch;margin:0 0 12px}
.ffrow>div:first-child{flex:1 1 auto;min-width:0}
.ffrow #lq,.ffrow #nblq{margin:0}
.ffgrp{flex:0 0 auto;display:inline-flex}
.ffbtn{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;padding:0 11px;height:auto;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--tx);
  font-size:13px;font-family:inherit;line-height:1.4;cursor:pointer}
.ffbtn:hover{background:var(--acc2);color:var(--acc);border-color:var(--acc)}
.ffbtn.on{background:var(--acc2);color:var(--acc);border-color:var(--acc);font-weight:600}
.ffbtn .ffic{font-size:13px;line-height:1;opacity:.85}

/* 面板：色块 + 两列按钮（手机由 clampPanel 变成屏幕正中弹层，跟别的菜单一样） */
#mp-ff,#mp-nbff{min-width:326px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
#mp-ff .ffdot,#mp-nbff .ffdot{display:inline-block;width:11px;height:11px;border-radius:3px;
  margin-right:7px;vertical-align:-1px;border:1px solid rgba(0,0,0,.16)}
#mp-ff button[data-ffk="img"],#mp-nbff button[data-ffk="img"]{grid-column:1/-1}
.ffhint{grid-column:1/-1;font-size:11.5px;line-height:1.7;color:var(--sub);padding:5px 7px 2px}

/* 顶上那条「只看 X · 命中 N 处 · ✕ 看全文」 */
.ffbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--acc2);
  border:1px solid var(--line);border-radius:9px;padding:6px 10px;margin:0 0 10px;
  font-size:12.5px;color:var(--tx)}
.ffbar b{color:var(--acc);font-weight:700}
.ffbar .ffbn{color:var(--sub)}
.ffbar .mini{margin-left:auto}

/* 图片墙：整篇全部的图片，一眼看全；点一张开灯箱（左右翻 = 这一篇的所有图） */
.ffgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:0 0 6px}
.ffg{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);
  cursor:zoom-in;display:flex;flex-direction:column;min-width:0}
.ffg img{width:100%;height:180px;object-fit:contain;display:block;background:var(--side);padding:4px}
.ffg:hover{border-color:var(--acc)}
.ffg:hover .ffcap span{color:var(--acc)}
.ffcap{font-size:11.5px;line-height:1.5;color:var(--sub);padding:5px 8px;border-top:1px solid var(--line);
  max-height:46px;overflow:hidden}
.ffcap span{cursor:pointer}
.ffcap span:hover{color:var(--acc);text-decoration:underline}
.fftip{font-size:12px;color:var(--sub);margin-top:6px;line-height:1.7}

/* 从图片墙点回正文时，那一行闪一下（让人一眼找到） */
.ffflash{box-shadow:inset 0 0 0 2px var(--acc);border-radius:6px;transition:box-shadow .2s}

/* 手机：一行放两张图就够，按钮别把搜索框挤没 */
html.phone .ffgal{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
html.phone .ffg img{height:130px}
html.phone .ffbtn{padding:0 8px;font-size:12.5px}
html.phone #mp-ff,html.phone #mp-nbff{min-width:0}
html.phone .ffbar{font-size:12px;padding:6px 8px}
html.phone .ffbar .mini{margin-left:0}

[data-theme=dark] .ffg img{background:#151a21}
[data-theme=dark] .ffbtn .ffic{opacity:1}

/* =========================================================================
   v3.310：图片墙每张卡片右上角的「↗ 定位」—— 以前只有底下那行灰字能点，
   谁都看不出能点。现在给一个**看得见**的按钮；手机上常显（没有悬停这回事）。
   位置：绝对定位在卡片右上角；点它 = ffJump（收筛选 + 展开上级 + 滚到那一行 + 闪）。
   ========================================================================= */
.ffg{position:relative}
.ffjump{position:absolute;right:6px;top:6px;z-index:3;display:inline-flex;align-items:center;gap:3px;
  font-size:11px;line-height:1;padding:5px 8px;border-radius:8px;cursor:pointer;user-select:none;
  color:#fff;background:rgba(18,22,28,.62);border:1px solid rgba(255,255,255,.30);
  box-shadow:0 1px 5px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ffjump:hover,.ffjump:active{background:var(--acc);border-color:var(--acc);color:#fff}
html.phone .ffjump{font-size:12px;padding:7px 10px}
[data-theme=dark] .ffjump{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.24)}