/* ==================================================================
   色彩系统：外观模式（light/dark）× 配色风格（palette）两个正交维度
   --sm 饱和度乘数 / --lm 亮度乘数：palette 只调这两个系数，
   六个频道色在两种主题下都引用它们 → 任意组合下风格一致生效。
   @property 注册后，切换风格时全站颜色平滑渐变而非跳变。
   ================================================================== */
@property --sm{ syntax:'<number>'; inherits:true; initial-value:1 }
@property --lm{ syntax:'<number>'; inherits:true; initial-value:1 }
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --hh:58px;
  --bg:#ECEDF0; --card:#FFFFFF;
  --ink:#1A1C21; --body:#33363E; --muted:#666D7A; --faint:#9AA0AD;
  --line:#E2E4E8; --line2:#D3D6DB;
  --sm:1; --lm:1;
  --ai:250 calc(56%*var(--sm)) calc(58%*var(--lm));
  --dev:216 calc(74%*var(--sm)) calc(52%*var(--lm));
  --sci:188 calc(78%*var(--sm)) calc(33%*var(--lm));
  --hw:29 calc(84%*var(--sm)) calc(46%*var(--lm));
  --design:332 calc(62%*var(--sm)) calc(55%*var(--lm));
  --eff:152 calc(58%*var(--sm)) calc(36%*var(--lm));
  --star:40 95% 46%;      /* 功能色不参与风格降饱和，保持辨识度 */
  --danger:0 72% 50%;
  --inkh:225 14% 13%; --cc:var(--dev);
  --feedpt:26px;
  --minw:320px; --gap:16px;
  transition:--sm .5s ease,--lm .5s ease;
  color-scheme:light;
}

body[data-density="compact"]{ --minw:290px; --gap:10px }

[data-theme="dark"]{
  --bg:#0E1013; --card:#16181D;
  --ink:#E8EAEF; --body:#C2C6D0; --muted:#8F95A3; --faint:#5E6470;
  --line:#24262D; --line2:#33363F;
  --ai:250 calc(70%*var(--sm)) calc(74%*var(--lm));
  --dev:216 calc(85%*var(--sm)) calc(72%*var(--lm));
  --sci:188 calc(70%*var(--sm)) calc(58%*var(--lm));
  --hw:29 calc(90%*var(--sm)) calc(64%*var(--lm));
  --design:332 calc(75%*var(--sm)) calc(74%*var(--lm));
  --eff:152 calc(55%*var(--sm)) calc(60%*var(--lm));
  --star:42 100% 62%; --danger:0 85% 68%;
  --inkh:220 20% 92%;
  color-scheme:dark;
}
/* ---- 配色风格 ---- */
[data-palette="muted"]{ --sm:.45; --lm:1.03 }            /* 柔和：低饱和莫兰迪 */
[data-palette="vivid"]{ --sm:1.4; --lm:1.04 }            /* 鲜明：高饱和 */
[data-palette="mono"]{                                    /* 素色：全部频道收敛为同色系 */
  --ai:219 13% 45%; --dev:219 13% 47%; --sci:219 13% 43%;
  --hw:219 13% 46%; --design:219 13% 44%; --eff:219 13% 45%;
}
[data-theme="dark"][data-palette="mono"]{
  --ai:218 14% 70%; --dev:218 15% 72%; --sci:218 14% 68%;
  --hw:218 14% 70%; --design:218 14% 69%; --eff:218 14% 70%;
}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font:400 14px/1.7 'Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
}
body.lock{overflow:hidden}
::selection{background:hsl(var(--ai)/.22)}
:focus-visible{outline:2px solid hsl(var(--cc));outline-offset:2px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}
[hidden]{display:none!important}
.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
svg{display:block}
kbd{font:500 10px 'IBM Plex Mono',monospace;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 6px;color:var(--faint);background:var(--card)}
mark.hl{background:hsl(var(--star)/.3);color:inherit;border-radius:3px;padding:0 1px}
.nojs{margin:14px 20px;padding:14px 18px;border:1px solid hsl(var(--danger));border-radius:12px;font-size:13px;color:hsl(var(--danger))}

/* ================= 顶栏 ================= */
header{
  position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.header-in{height:var(--hh);display:flex;align-items:center}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo-t b{font-size:17px;font-weight:700;letter-spacing:.02em}
.logo-t span{display:block;font:500 8.5px 'IBM Plex Mono',monospace;letter-spacing:.34em;color:var(--faint);margin-top:1px}
.h-act{margin-left:auto;display:flex;gap:8px}
.iconbtn{
  position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  cursor:pointer;transition:.16s;font:600 13px 'IBM Plex Mono',monospace;
}
.iconbtn:hover{border-color:var(--ink);color:var(--ink)}
.iconbtn.on{border-color:hsl(var(--dev)/.55);color:hsl(var(--dev));background:hsl(var(--dev)/.08)}
.iconbtn .badge{
  position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;
  background:hsl(var(--hw));border:2px solid var(--card);display:none;
}
.iconbtn.dirty .badge{display:block}
[data-theme="light"] .i-sun{display:none}
[data-theme="dark"] .i-moon{display:none}

/* ================= 简短介绍 ================= */
.intro{padding:52px 20px 34px}
.intro h1{font-size:clamp(30px,5vw,40px);font-weight:700;line-height:1.2;letter-spacing:.01em}
.intro h1 span{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.32em;color:var(--faint);margin-left:12px;vertical-align:4px}
.sbar{display:flex;gap:3px;width:118px;margin:15px 0 16px}
.sbar i{flex:1;height:5px;border-radius:99px;background:hsl(var(--cc))}
.intro-p{max-width:560px;color:var(--muted);font-size:15px;line-height:1.85}
.intro-stats{margin-top:14px;font-size:12px;color:var(--faint);letter-spacing:.04em}

/* ================= 筛选栏 ================= */
.fbar{
  position:sticky;top:var(--hh);z-index:40;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.fbar-main{display:flex;align-items:center;gap:10px}
.chips-zone{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.chips{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;
  border-radius:99px;border:1px solid var(--line);background:var(--card);
  color:var(--muted);font-size:12.5px;font-family:inherit;cursor:pointer;
  white-space:nowrap;transition:border-color .15s,color .15s,background .15s;
}
.chip:hover{color:var(--ink);border-color:var(--line2)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:hsl(var(--cc));flex-shrink:0}
.chip .cnt{font:400 10.5px 'IBM Plex Mono',monospace;color:var(--faint)}
.chip.on{border-color:hsl(var(--cc)/.55);background:hsl(var(--cc)/.1);color:hsl(var(--cc));font-weight:500}
.chip.on .cnt{color:hsl(var(--cc)/.7)}
.chip.neutral{--cc:var(--inkh)}
.chip.neutral .dot{background:var(--faint)}
.chip.chip-fav{--cc:var(--star)}
.chip.chip-hide{--cc:var(--danger)}
.chip.in-more{display:none}
.more-box{flex-shrink:0;padding:10px 0}
.more-btn .ci{transition:transform .2s}
.more-box.pop-on .more-btn .ci{transform:rotate(180deg)}
.more-pop{
  position:absolute;top:calc(100% - 2px);right:0;z-index:70;
  min-width:172px;max-width:280px;max-height:min(330px,52vh);overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.3);display:none;
}
.more-pop.on{display:block;animation:pop .18s ease}
.mp-item{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 11px;
  border:none;background:none;border-radius:8px;color:var(--body);
  font-size:13px;font-family:inherit;cursor:pointer;text-align:left;transition:background .12s;
}
.mp-item:hover{background:var(--bg)}
.mp-item .dot{width:7px;height:7px;border-radius:50%;background:hsl(var(--cc,220 8% 62%));flex-shrink:0}
.mp-item .cnt{margin-left:auto;font:400 11px 'IBM Plex Mono',monospace;color:var(--faint)}
.mp-item.on{color:hsl(var(--cc));background:hsl(var(--cc)/.09);font-weight:600}
.mp-empty{padding:10px 12px;font-size:12px;color:var(--faint)}
/* ---- 搜索（含历史建议下拉） ---- */
.search-box{position:relative;flex-shrink:0;display:flex}
.search{
  display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--faint);width:210px;transition:border-color .15s,width .2s;cursor:text;
}
.search:focus-within{border-color:var(--ink);width:258px}
.search input{border:none;background:none;outline:none;color:var(--ink);width:100%;font:400 12.5px 'IBM Plex Mono',monospace}
.search input::placeholder{color:var(--faint)}
.search kbd{flex-shrink:0}
.sh-pop{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:80;
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.32);padding:5px;animation:pop .15s ease;
}
.sh-h{font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.2em;color:var(--faint);padding:7px 10px 5px}
.sh-item{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;
  border:none;background:none;border-radius:8px;font-size:12.5px;font-family:inherit;
  color:var(--body);cursor:pointer;text-align:left;transition:background .12s;
}
.sh-item:hover{background:var(--bg)}
.sh-item svg{color:var(--faint);flex-shrink:0}
.sh-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-clr{
  display:block;width:100%;padding:8px 10px;border:none;border-top:1px dashed var(--line);
  margin-top:4px;background:none;border-radius:0 0 8px 8px;
  font:400 11.5px 'Noto Sans SC',sans-serif;color:var(--faint);cursor:pointer;transition:color .15s;
}
.sh-clr:hover{color:hsl(var(--danger))}
.cnt-main{flex-shrink:0;font:400 12px 'IBM Plex Mono',monospace;color:var(--faint);
  font-variant: diagonal-fractions;
  font-family: Georgia, serif;
}
@media (max-width:768px){
  .cnt-main{display:none;}
}

/* ================= 查询与显示 · 综合面板 ================= */
.panel-wrap{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .32s cubic-bezier(.2,.75,.25,1);
  border-top:0 solid var(--line);
}
.panel-wrap.open{grid-template-rows:1fr;border-top-width:1px}
.pw-in{min-height:0;overflow:hidden}
.panel{padding:16px 0 18px;max-height:calc(100vh - var(--hh) - 64px);overflow-y:auto}
.panel-head{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.p-title{font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;color:var(--ink)}
.p-title svg{color:hsl(var(--dev))}
.p-tip{font-size:11.5px;color:var(--faint)}
.p-fold{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font:500 11.5px 'Noto Sans SC',sans-serif;padding:5px 11px;border-radius:8px;
  border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;transition:.15s;
}
.p-fold:hover{color:var(--ink);border-color:var(--line2)}
.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:16px 30px}
.p-sec{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.p-lbl{font-size:11.5px;color:var(--muted);display:flex;gap:7px;align-items:center;font-weight:500}
.p-lbl svg{color:var(--faint)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;background:var(--card);overflow:hidden}
.seg button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:500 11.5px 'Noto Sans SC',sans-serif;padding:0 12px;height:32px;border:none;
  background:none;color:var(--muted);cursor:pointer;transition:.15s;white-space:nowrap;
}
.seg button:not(.on):hover{color:var(--ink)}
.seg button.on{background:var(--ink);color:var(--bg)}
.pd{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.seg button.on .pd{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.p-note{font-size:10.5px;color:var(--faint);line-height:1.6}
.panel-foot{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:17px;padding-top:13px;border-top:1px dashed var(--line);
}
.p-sum{margin-left:auto;font:400 11px 'IBM Plex Mono',monospace;color:var(--faint);line-height:1.7}

/* ================= 瀑布流卡片 ================= */
.feed{padding:var(--feedpt) 20px 6px}
.grid{position:relative}
/* ==================================================================
   瀑布流原生模式：CSS grid-lanes（Grid Level 3）
   支持时浏览器接管排布，脚本布局引擎自动休眠（见 JS LANES 检测）；
   不支持时回退脚本引擎。两条路径共用 --minw / --gap 单一数值源。
   ================================================================== */
@supports (display: grid-lanes){
  body[data-layout="waterfall"] .grid{
    display:grid-lanes;
    grid-template-columns:repeat(auto-fill,minmax(var(--minw),1fr));
    gap:var(--gap);
  }
  body[data-layout="waterfall"] .grid .card{
    position:relative;top:auto;left:auto;width:auto;
  }
}
/* 卡片外壳：定位 + 悬浮；视觉样式在 .card-in 上，触屏左滑时外壳不动、内层平移 */
.card{
  position:absolute;top:0;left:0;border-radius:14px;cursor:pointer;
  transition:transform .2s ease;
}
.card.off{display:none}
.card.enter{animation:cardIn .5s cubic-bezier(.2,.75,.3,1) backwards}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}}
.card:hover,.card:focus-visible{transform:translateY(-3px)}
.card-in{
  position:relative;z-index:2;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 16px 12px;
  transition:transform .26s cubic-bezier(.2,.8,.3,1),border-color .2s,box-shadow .2s,background-color .3s;
}
.card:hover .card-in,.card:focus-visible .card-in{
  border-color:hsl(var(--cc)/.5);
  box-shadow:0 14px 30px -16px hsl(var(--cc)/.5);
}
.card:hover .c-title{color:hsl(var(--cc))}
.card-in.drag{transition:none;will-change:transform}
/* 触屏滑动提示层:左滑隐藏 · 右滑收藏(仅触屏手势中可见) */
.sw-hint{
  position:absolute;inset:0;z-index:1;border-radius:14px;
  display:grid;place-items:center;
  opacity:0;pointer-events:none;
}
.sw-hint span{
  display:none;align-items:center;gap:8px;
  font:600 13.5px 'Noto Sans SC',sans-serif;letter-spacing:.04em;
  padding:9px 18px;border-radius:99px;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
  transform:scale(.9);
}
.sw-hint .s-hide{color:hsl(var(--danger));background:hsl(var(--danger)/.12);border:1px solid hsl(var(--danger)/.35)}
.sw-hint .s-fav{color:hsl(var(--star));background:hsl(var(--star)/.14);border:1px solid hsl(var(--star)/.4)}
.sw-hint[data-act="hide"] .s-hide{display:inline-flex}
.sw-hint[data-act="fav"] .s-fav{display:inline-flex}
.sw-hint[data-ready="1"] span{transform:scale(1.06)}
/* 滑动中的卡片抬升 */
.card.swiping{z-index:6}
.card.swiping .card-in{
  border-color:hsl(var(--cc)/.5);
  box-shadow:0 18px 36px -18px rgba(0,0,0,.4);
}
}
/* 右滑收藏:从松手位置弹回原位(弹簧) */
.card.faving{pointer-events:none}
.card.faving .card-in{animation:cardFavBack .56s cubic-bezier(.22,1.28,.36,1) forwards}
@keyframes cardFavBack{
  from{transform:translateX(var(--fdx,90px))}
  62%{transform:translateX(-7px)}
  to{transform:none}
}
.card.faving .sw-hint{opacity:0!important;transition:opacity .2s}
@media (hover:none){
  .card{overflow:hidden;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  .card-in{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  .c-btns{display:none}
}

/* ==================================================================
   聚焦浏览：三级亮度层级
   · 标题永远全对比——检索锚点，不参与静默
   · 悬停 / 键盘聚焦的卡片全场唯一“点亮”
   · 其余卡片进入静默：底色沉入背景、次要文字与图片收敛
   豁免：触屏（无悬停恢复途径）与系统高对比偏好
   ================================================================== */
.card .c-img{ filter:saturate(.86) brightness(.96); transition:filter .38s ease,opacity .5s ease }
@media (hover:hover) and (pointer:fine) and (not (prefers-contrast:more)){
  /* 静默底色：亮色向墨色沉，暗色向背景沉 */
  .card-in{ background-color:color-mix(in srgb,var(--card) 98%,var(--ink) 2%) }
  [data-theme="dark"] .card-in{ background-color:color-mix(in srgb,var(--card) 95%,var(--bg)) }
  /* 次要信息收敛 */
  .card .c-ex{opacity:.84;transition:opacity .3s}
  .card .c-pts{opacity:.62;transition:opacity .3s}
  .card .c-foot{opacity:.6;transition:opacity .3s}
  .card .c-ic{opacity:.78;transition:opacity .3s}
  .card .c-cat{opacity:.82;transition:opacity .3s}
  .card .c-tr .c-date,.card .pill{opacity:.75;transition:opacity .3s}
  .card .c-img{filter:saturate(.78) brightness(.93)}
  /* 激活：点亮整卡 */
  :is(.card:hover,.card:focus-visible) .card-in{ background-color:var(--card) }
  :is(.card:hover,.card:focus-visible) .c-ex,
  :is(.card:hover,.card:focus-visible) .c-pts,
  :is(.card:hover,.card:focus-visible) .c-foot,
  :is(.card:hover,.card:focus-visible) .c-ic,
  :is(.card:hover,.card:focus-visible) .c-cat{ opacity:1 }
  :is(.card:hover,.card:focus-visible) .c-tr .c-date,
  :is(.card:hover,.card:focus-visible) .pill{ opacity:1 }
  :is(.card:hover,.card:focus-visible) .c-img{ filter:none }
}
/* 夜间：图片进一步收敛（触屏同样生效），悬停复原但不刺眼 */
[data-theme="dark"] .card .c-img{ filter:saturate(.7) brightness(.8) }
[data-theme="dark"] :is(.card:hover,.card:focus-visible) .c-img{ filter:saturate(.9) brightness(.96) }

/* ==================================================================
   布局模式：瀑布流（多列错落）× 列表（左主栏 + 右侧工具栏）
   ================================================================== */
body[data-layout="list"] main.feed{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:32px;
  align-items:start;
}
body[data-layout="list"] .feed-main{max-width:none}
body[data-layout="list"] .grid .card{position:relative;margin-bottom:16px}
body[data-density="compact"][data-layout="list"] .grid .card{margin-bottom:10px}
/* 两种封面变体：按数据指定的那一种显示（瀑布流） */
.grid .c-cover.top{display:none}
.grid .c-cover.side{display:none}
.grid .card.has-top .c-cover.top{display:block}
.grid .card.has-side .c-cover.side{display:block}
/* 列表模式：全部封面统一为右侧缩略图（头条式） */
body[data-layout="list"] .grid .card .c-cover.top{display:none}
body[data-layout="list"] .grid .card.has-img .c-cover.side{display:block}
body[data-layout="list"] .grid .c-cover.side{width:150px}
body[data-density="compact"][data-layout="list"] .grid .c-cover.side{width:118px}

/* 宽卡呼吸感：列表模式放宽内边距，避免全宽卡片显得空旷 */
body[data-layout="list"] .card-in{padding:18px 22px 14px}

/* 宽卡配比：正文变宽后右侧缩略图同步放大，保持图文比例 */
@media (min-width:900px){
  body[data-layout="list"] .grid .c-cover.side{width:168px}
}

/* ---- 右侧侧栏（插槽化：每个 .s-card 即一个插槽） ---- */
.sidebar{display:none;flex-direction:column;gap:16px;position:sticky;top:calc(var(--hh) + var(--fbarH,53px) + var(--feedpt));max-height:calc(100vh - var(--hh) - var(--fbarH,53px) - var(--feedpt) - 24px);overflow-y:auto;scrollbar-width:thin;padding-bottom:4px}
body[data-layout="list"] .sidebar{display:flex}
.s-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px 15px;flex-shrink:0}
.s-h{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.18em;color:var(--faint);display:flex;align-items:center;margin-bottom:10px}
.s-h .s-x{
  margin-left:auto;border:1px solid var(--line);background:none;color:var(--faint);
  font:400 11px 'Noto Sans SC',sans-serif;padding:3px 9px;border-radius:6px;cursor:pointer;transition:.15s;
}
.s-h .s-x:hover{color:hsl(var(--danger));border-color:hsl(var(--danger)/.5)}
.s-list{list-style:none}
.s-li{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:8px;cursor:pointer;transition:background .12s}
.s-li:hover{background:var(--bg)}
.s-t{flex:1;min-width:0;font-size:12.5px;color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-li:hover .s-t{color:var(--ink)}
.s-m{font:400 10.5px 'IBM Plex Mono',monospace;color:var(--faint);flex-shrink:0}
.s-li .s-x{width:20px;height:20px;border:none;background:none;color:var(--faint);border-radius:5px;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:.12s}
.s-li .s-x:hover{color:hsl(var(--danger));background:hsl(var(--danger)/.1)}
.s-empty{padding:6px;font-size:12px;color:var(--faint);line-height:1.7}
.s-tool a{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:8px;text-decoration:none;transition:background .12s}
.s-tool a:hover{background:var(--bg)}
/* ---- 番茄钟 ---- */
.pom-face{text-align:center;padding:10px 0 12px}
.pom-time{font:500 34px/1.1 'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pom-time.urgent{color:hsl(var(--danger));animation:pomPulse 1s ease infinite}
@keyframes pomPulse{50%{opacity:.55}}
.pom-state{font-size:11.5px;color:var(--faint);margin-top:6px}
.pom-btns{display:flex;gap:8px;justify-content:center}
.pom-btns .btn{flex:1;justify-content:center;padding:9px 12px}
.pom-durs{display:flex;gap:6px;margin-top:11px}
.pom-durs button{
  flex:1;font:500 11px 'Noto Sans SC',sans-serif;padding:6px 0;border-radius:7px;
  border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;transition:.15s;
}
.pom-durs button:hover{color:var(--ink)}
.pom-durs button.on{border-color:hsl(var(--eff)/.6);background:hsl(var(--eff)/.1);color:hsl(var(--eff))}
.pom-durs button:disabled{opacity:.4;cursor:default}
.pom-nt{
  display:block;width:100%;margin-top:11px;padding:7px 0;border:none;background:none;
  border-top:1px dashed var(--line);font:400 11px 'Noto Sans SC',sans-serif;color:var(--faint);
  cursor:pointer;transition:color .15s;
}
.pom-nt:hover{color:hsl(var(--dev))}
.pom-nt:disabled{color:hsl(var(--eff));cursor:default}
/* ---- 推广位：低调、可关闭、明确标注 ---- */
.s-ad{border-style:dashed;position:relative}
.s-adx{position:absolute;top:9px;right:9px;width:22px;height:22px;border:none;background:none;color:var(--faint);border-radius:6px;cursor:pointer;display:grid;place-items:center;transition:.15s}
.s-adx:hover{color:var(--ink);background:var(--bg)}
.s-adb{display:flex;flex-direction:column;gap:6px;text-decoration:none;border:1px solid var(--line);border-radius:9px;padding:13px 12px;transition:border-color .15s,background .15s}
.s-adb:hover{border-color:var(--line2);background:var(--bg)}
.s-adb b{font-size:12.5px;color:var(--body)}
.s-adb span{font:400 10.5px 'IBM Plex Mono',monospace;color:var(--faint)}
/* ---- 迷你番茄胶囊（侧栏不可见但计时中时出现） ---- */
.mpm{
  position:fixed;right:20px;bottom:74px;z-index:95;
  display:none;align-items:center;gap:9px;
  background:#26282E;color:#E8EAEF;border:1px solid rgba(255,255,255,.1);
  padding:9px 12px;border-radius:99px;cursor:pointer;user-select:none;
  box-shadow:0 10px 28px -10px rgba(0,0,0,.4);
  font:400 12px 'IBM Plex Mono',monospace;
}
.mpm.on{display:flex}
.mpm-dot{width:7px;height:7px;border-radius:50%;background:hsl(var(--eff));animation:pomPulse 1.2s ease infinite}
.mpm.paused .mpm-dot{animation:none;background:hsl(var(--star))}
.mpm-t{font-weight:500}
.mpm-l{font-family:'Noto Sans SC',sans-serif;font-size:11px;color:rgba(255,255,255,.6)}
.mpm-x{width:20px;height:20px;border:none;background:rgba(255,255,255,.12);color:#fff;border-radius:50%;cursor:pointer;font-size:12px;line-height:1;display:grid;place-items:center}
.mpm-x:hover{background:rgba(255,255,255,.24)}
/* 窄屏：侧栏隐藏，主栏放宽居左 */
@media (max-width:768px){
  body[data-layout="list"] main.feed{
    grid-template-columns:minmax(0,1fr);   /* 侧栏消失后单轨占满 */
  }
  .sidebar{display:none!important}
}

/* ---- 封面图：占位 + 懒加载 ---- */
.c-cover{position:relative!important;top:auto;overflow:hidden;background:hsl(var(--cc)/.07);display:block;flex-shrink:0}
.c-cover.top{margin:-16px -16px 12px;border-radius:12px 12px 0 0;aspect-ratio:var(--ar,16/10)}
.c-cover.side{width:112px;flex-shrink:0;border-radius:10px;align-self:stretch}
.c-ph{position:absolute;inset:0;width:100%;height:100%}
.c-ph .bg{fill:hsl(var(--cc)/.07)}
.c-ph .ring{fill:none;stroke:hsl(var(--cc)/.16);stroke-width:1}
.c-ph .glyph{fill:none;stroke:hsl(var(--cc)/.42);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:hsl(var(--cc)/.42)}
.c-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease,filter .38s ease;
}
.c-cover.ld .c-img{opacity:1}
.c-cover.err .c-img{display:none}
.c-mid{display:flex;gap:12px;align-items:stretch}
.c-maintxt{flex:1;min-width:0}
.c-top{display:flex;align-items:center;gap:9px}
.c-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:hsl(var(--cc)/.13);color:hsl(var(--cc));flex-shrink:0}
.c-cat{font-size:12px;font-weight:600;color:hsl(var(--cc))}
.c-tr{margin-left:auto;position:relative;display:flex;align-items:center;min-height:26px;flex-shrink:0}
.c-date{font-size:11px;color:var(--faint)}
.pill{font-size:10.5px;font-weight:500;padding:3px 9px;border-radius:99px;background:hsl(var(--cc)/.12);color:hsl(var(--cc))}
.c-btns{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);display:flex;gap:5px}
.cb{
  width:26px;height:26px;border-radius:8px;border:1px solid var(--line);
  background:var(--card);color:var(--muted);display:grid;place-items:center;
  cursor:pointer;padding:0;opacity:0;transform:translateX(6px);
  transition:opacity .18s,transform .18s,color .15s,border-color .15s,background .15s;
}
.card:hover .cb,.card:focus-visible .cb{opacity:1;transform:translateY(-50%)}
.cb:hover{color:var(--ink);border-color:var(--line2)}
.cb-fav:hover{color:hsl(var(--star))}
.cb-hide:hover{color:hsl(var(--danger))}
/* 隐藏分类视图:原「不感兴趣」按钮语义变为「恢复显示」，绿色提示 */
body[data-chip='hide'] .cb-hide:hover{color:hsl(var(--eff));border-color:hsl(var(--eff)/.5)}
body[data-chip='hide'] .card .cb-hide svg{transform:rotate(180deg)}
.card.faved .cb-fav{
  opacity:1;transform:translateY(-50%);
  color:hsl(var(--star));border-color:hsl(var(--star)/.45);background:hsl(var(--star)/.1);
}
.card.faved .cb-fav svg{fill:currentColor}
/* 标题：全场最高对比层级，永不静默 */
.c-title{font-size:15.5px;font-weight:700;line-height:1.55;letter-spacing:.01em;margin:12px 0 7px;transition:color .15s}
.c-ex{font-size:13px;line-height:1.78;color:var(--muted)}
.c-pts{margin-top:11px;padding:9px 12px;border-radius:9px;background:hsl(var(--cc)/.07);display:grid;gap:4px;font-size:11.5px;color:hsl(var(--cc))}
.c-pts i{font-style:normal;display:flex;align-items:center;gap:8px}
.c-pts i::before{content:'';width:5px;height:5px;border-radius:1.5px;background:hsl(var(--cc));flex-shrink:0}
.c-foot{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--faint)}
.c-src{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-host{font:400 11.5px 'IBM Plex Mono',monospace;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-views{display:inline-flex;align-items:center;gap:4px;font:400 11px 'IBM Plex Mono',monospace;color:var(--faint);flex-shrink:0}
.c-views.hot{color:hsl(var(--cc));font-weight:500}
.c-visit{display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-size:12.5px;font-weight:600;color:hsl(var(--cc));flex-shrink:0;border-radius:6px}
.c-visit:hover{text-decoration:underline}
.c-more{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--faint);flex-shrink:0}
.card:hover .c-more{color:hsl(var(--cc))}


/* ==================================================================
   卡片样式：全部信息（默认）× 极简标题（CSS 显隐，DOM 恒定）
   ================================================================== */
body[data-cardstyle="mini"]{ --minw:180px; --gap:12px }
body[data-density="compact"][data-cardstyle="mini"]{ --minw:150px; --gap:8px }
/* 裁剪四个信息块：摘要、关键数据、页脚、封面 */
body[data-cardstyle="mini"] .card .c-ex,
body[data-cardstyle="mini"] .card .c-pts,
/*body[data-cardstyle="mini"] .card .c-foot,*/
body[data-cardstyle="mini"] .card .c-mid .c-cover.side{display:none}
body[data-cardstyle="mini"] .c-mid{flex-direction:row}
/* 迷你视觉：紧凑内边距、两行标题截断、图标微缩 */
body[data-cardstyle="mini"] .card-in{padding:10px 12px}
body[data-cardstyle="mini"] .card .c-ic{width:26px;height:26px;border-radius:7px}
body[data-cardstyle="mini"] .card .c-title{
  margin:0;font-size:13.5px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body[data-cardstyle="mini"] .card .c-tr{min-height:22px}
body[data-cardstyle="mini"] .card .c-date{font-size:10.5px}
body[data-cardstyle="mini"] .card .pill{font-size:10px;padding:2px 7px}
/* 列表模式 × 极简：多列网格（移动单列） */
body[data-layout="list"][data-cardstyle="mini"] .grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--gap);
}
body[data-layout="list"][data-cardstyle="mini"] .grid .card{
  position:relative;margin-bottom:0;width:auto;left:auto;top:auto;
}
/* 极简卡行高只有一两行标题，侧封面 stretch 会变成 150×40 的细长条；
   改为固定方形缩略图并垂直居中，恢复缩略图观感 */
body[data-layout="list"][data-cardstyle="mini"] .grid .c-cover.side{
  width:64px;height:64px;align-self:center;border-radius:9px;
}
body[data-density="compact"][data-layout="list"][data-cardstyle="mini"] .grid .c-cover.side{
  width:56px;height:56px;border-radius:8px;
}
/* 网格会把同行卡片拉伸到最高一张；.card-in 若只按内容高度，
   无图卡片会被撑出空白，且 .card-acts（以 .card 为定位上下文垂直居中）
   会偏离可见盒子——让 .card-in 填满卡片，行内视觉与按钮居中同时归位 */
body[data-layout="list"][data-cardstyle="mini"] .grid .card-in{
  height:100%;
}
@media (max-width:640px){
  body[data-layout="list"][data-cardstyle="mini"] .grid{grid-template-columns:1fr}
}

/* ==================================================================
   封面图片：显示 × 隐藏（CSS 显隐，DOM 恒定）
   ================================================================== */
body[data-imgshow="off"] .card .c-cover{display:none!important}
/* 无图 × 全信息：标题回归顶部自然节奏（top 封面负 margin 消失后的补偿） */
body[data-imgshow="off"] .card .c-title{margin-top:12px}
/* 无图 × 极简：本来无摘要无封面差异，标题 margin 补偿沿用极简规则即可 */
/* 无图模式下列宽下限适度收窄（纯文字卡更窄也读得动） */
body[data-imgshow="off"]{ --minw:230px }
body[data-density="compact"][data-imgshow="off"]{ --minw:200px }
/*body[data-imgshow="off"] .m-cov{display:none!important}*/
/* 与极简叠加时极简的 --minw 更小，后者在后声明自然胜出，无需干预 */


/* 极简卡：隐藏全部非核心元素（DOM 保留，纯 CSS 摘除） */
body[data-cardstyle="mini"] .card:not(.mini-card) .c-ex,
body[data-cardstyle="mini"] .card:not(.mini-card) .c-pts,
body[data-cardstyle="mini"] .card:not(.card):not(.mini-card) .c-foot{display:none}


/* ---- 密度：紧凑 ---- */
body[data-density="compact"] .card-in{padding:12px 13px 9px}
body[data-density="compact"] .c-ic{width:26px;height:26px;border-radius:8px}
body[data-density="compact"] .c-title{font-size:14.5px;margin:9px 0 5px;line-height:1.5}
body[data-density="compact"] .c-ex{font-size:12.5px;line-height:1.68}
body[data-density="compact"] .c-pts{margin-top:8px;padding:7px 10px;font-size:11px}
body[data-density="compact"] .c-foot{margin-top:10px;padding-top:9px}
body[data-density="compact"] .c-cat{font-size:11.5px}
body[data-density="compact"] .c-cover.top{margin:-12px -13px 9px}
body[data-density="compact"] .c-cover.side{width:86px}


/* ================= 加载区 / 空状态 ================= */
.loader{display:flex;justify-content:center;padding:30px 0 8px;min-height:70px;align-items:center}
.ld{display:flex;align-items:center;gap:9px;font:400 12px 'IBM Plex Mono',monospace;color:var(--faint)}
.spinner{width:13px;height:13px;border:2px solid var(--line2);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font:500 12.5px 'IBM Plex Mono',monospace;letter-spacing:.05em;
  padding:10px 18px;border-radius:9px;cursor:pointer;transition:.16s;
  border:1px solid var(--ink);background:transparent;color:var(--ink);text-decoration:none;
}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.ghost{border-color:var(--line2);color:var(--muted)}
.btn.ghost:hover{border-color:var(--ink);color:var(--ink);background:transparent}
.btn.star-on{color:hsl(var(--star));border-color:hsl(var(--star)/.5)}
.btn.star-on svg{fill:currentColor}
.btn.star-on:hover{background:hsl(var(--star)/.08);color:hsl(var(--star));border-color:hsl(var(--star)/.5)}
.empty{padding:72px 20px;text-align:center;color:var(--muted)}
.empty svg{margin:0 auto 16px;color:var(--faint)}
.empty p{margin-bottom:18px;font-size:14px}
#sentinel{height:1px}

/* ================= 详情预览弹层 ================= */
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal.on{display:flex;align-items:center;justify-content:center}
.m-mask{position:absolute;inset:0;background:rgba(12,14,18,.52);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.m-panel{
  position:relative;display:flex;flex-direction:column;
  width:min(680px,calc(100vw - 28px));max-height:min(88vh,900px);
  background:var(--card);border:1px solid var(--line);border-top:3px solid hsl(var(--cc));
  border-radius:16px;overflow:hidden;
  box-shadow:0 30px 90px -20px rgba(0,0,0,.45);
}
.m-panel.pop{animation:pop .24s ease}
@keyframes pop{from{opacity:0;transform:scale(.965)}}
.m-panel.zoom{animation:zoomIn .18s ease}
@keyframes zoomIn{from{opacity:.55;transform:scale(.985)}}
.m-panel.full{width:min(1140px,calc(100vw - 24px));max-height:calc(100vh - 24px)}
.m-head{display:flex;align-items:center;gap:5px;padding:11px 12px 11px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.m-chip{display:flex;align-items:center;gap:8px;color:hsl(var(--cc));font-size:12.5px;font-weight:600}
.m-chip em{font-style:normal;font-weight:400;color:var(--faint);font-size:11.5px}
.m-pos{margin-left:auto;margin-right:8px;font:400 11px 'IBM Plex Mono',monospace;color:var(--faint)}
.m-nav{width:30px;height:30px;border-radius:50%;border:none;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.15s}
.m-nav:hover:not(:disabled){background:var(--bg);color:var(--ink)}
.m-nav:disabled{opacity:.3;cursor:default}
.m-scroll{overflow-y:auto;padding:24px 30px 28px;min-height:0}
.m-title{font-size:21px;font-weight:700;line-height:1.5;margin-bottom:10px}
.m-meta{font:400 12px 'IBM Plex Mono',monospace;color:var(--faint);margin-bottom:18px}
.m-lead{font-size:14.5px;line-height:1.9;color:var(--muted);margin-bottom:18px}
.m-pts{padding:13px 16px;border-radius:10px;background:hsl(var(--cc)/.07);display:grid;gap:5px;margin-bottom:20px}
.m-pts-l{font-size:10.5px;letter-spacing:.22em;color:hsl(var(--cc)/.75);margin-bottom:3px}
.m-pts i{font-style:normal;font-size:12.5px;color:hsl(var(--cc));display:flex;gap:9px;align-items:center}
.m-pts i::before{content:'';width:5px;height:5px;border-radius:1.5px;background:hsl(var(--cc));flex-shrink:0}
.m-p{font-size:14.5px;line-height:1.95;color:var(--body);margin-bottom:14px}
.m-lbl{display:block;font-size:10.5px;letter-spacing:.22em;color:hsl(var(--cc)/.75);margin:4px 0 6px}
.m-feats{list-style:none;margin-bottom:6px}
.m-feats li{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px;color:var(--body);line-height:1.7}
.m-feats li:last-child{border-bottom:none}
.m-feats svg{color:hsl(var(--cc));flex-shrink:0;margin-top:4px}
.m-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
/* ---- Markdown 正文块 ---- */
.m-p a{color:hsl(var(--cc));text-decoration:underline;text-underline-offset:3px}
.m-code{background:#14161B;color:#E8EAEF;border-radius:10px;padding:13px 16px;overflow-x:auto;font:400 12.5px/1.7 'IBM Plex Mono',ui-monospace,Consolas,monospace;margin-bottom:14px}
.m-code code{background:none;padding:0}
.m-p code{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-size:.9em;background:hsl(var(--cc)/.1);padding:1px 6px;border-radius:5px}
.m-h{color:var(--ink);margin:18px 0 8px;line-height:1.5;font-size:16px}
.m-quote{border-left:3px solid hsl(var(--cc));padding:2px 0 2px 14px;color:var(--muted);margin-bottom:14px}
.m-list{list-style:none;margin-bottom:14px}
.m-list li{position:relative;padding:4px 0 4px 20px;color:var(--body);font-size:14px;line-height:1.8}
.m-list li::before{content:'';position:absolute;left:4px;top:14px;width:6px;height:6px;border-radius:2px;background:hsl(var(--cc))}
/* ---- 标签 ---- */
.m-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.m-tag{border:1px solid var(--line);background:var(--card);color:var(--muted);font:500 11.5px 'Noto Sans SC',sans-serif;padding:3px 11px;border-radius:99px;cursor:pointer;transition:.15s}
.m-tag:hover{color:hsl(var(--cc));border-color:hsl(var(--cc)/.5);background:hsl(var(--cc)/.07)}
/* ---- 评论区 ---- */
.m-comments{margin-top:26px;padding-top:16px;border-top:1px dashed var(--line)}
.m-cm-lbl{font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.22em;color:var(--faint);margin-bottom:12px}
.m-cm{padding:10px 0;border-bottom:1px dashed var(--line)}
.m-cm-who{font-weight:600;font-size:12.5px;color:var(--body)}
.m-cm-at{font:400 10.5px 'IBM Plex Mono',monospace;color:var(--faint);margin-left:9px}
.m-cm-txt{font-size:13.5px;line-height:1.8;color:var(--body);margin-top:4px;white-space:pre-wrap;word-break:break-word}
.m-cm-empty{font-size:12px;color:var(--faint);padding:8px 0}
.m-cm-form{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.m-cm-form input,.m-cm-form textarea{border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:400 13px 'Noto Sans SC',sans-serif;padding:8px 12px;outline:none;transition:border-color .15s;width:100%}
.m-cm-form input:focus,.m-cm-form textarea:focus{border-color:hsl(var(--cc)/.6)}
.m-cm-form textarea{resize:vertical;min-height:52px}
.m-cm-row{display:flex;gap:8px;align-items:flex-end}
.m-cm-row .btn{flex-shrink:0;padding:9px 16px}
.m-visit{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:10px;text-decoration:none;
  background:hsl(var(--cc));color:#fff;font-size:13.5px;font-weight:600;
  transition:filter .15s,transform .15s;
}
.m-visit:hover{filter:brightness(1.1);transform:translateY(-1px)}
.m-hint{flex-shrink:0;text-align:center;padding:9px;border-top:1px solid var(--line);font:400 10.5px 'IBM Plex Mono',monospace;color:var(--faint);letter-spacing:.08em}
@media (hover:none){.m-hint{display:none}}
/* ---- 详情弹层滑动翻页（触屏） ---- */
.m-body-slides{display:flex;position:relative;will-change:transform}
.m-body-slides.dragging{transition:none!important}
.m-slide{flex:0 0 100%;min-width:100%}
.m-slide.ghost{position:absolute;top:0;left:0;width:100%;pointer-events:none}
.m-slide.ghost.left{transform:translateX(-100%)}
.m-slide.ghost.right{transform:translateX(100%)}

/* ---- 下拉关闭（触屏）：滚到顶后继续下拉 ---- */
.m-panel::before{
  content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:36px;height:4px;border-radius:99px;background:var(--line2);z-index:5;
  opacity:0;transition:opacity .2s;
}
.m-panel.pulling::before{opacity:1}          /* 下拉中把手常显 */
.m-panel.dropping{transition:transform .26s cubic-bezier(.3,.7,.3,1)}

.m-panel.full .m-scroll{padding:34px 48px 36px}
.m-panel.full .m-title{font-size:23px}
.m-panel.full .m-lead,.m-panel.full .m-p{font-size:15.5px;max-width:760px}
.m-panel.full .m-feats li{max-width:760px}
/* 弹层封面（阅读态，不参与卡片静默） */
.m-cov{margin:-24px -30px 20px;border-radius:12px 12px 0 0}
.m-panel.full .m-cov{margin:-34px -48px 22px}
.m-cov .c-img{filter:saturate(.92) brightness(.98)}

/* ================= 长按操作菜单 ================= */
.lp-mask{position:fixed;inset:0;z-index:240;background:rgba(10,12,16,.18);display:none}
.lp-mask.on{display:block}
.lp{
  position:fixed;z-index:250;min-width:160px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.4);display:none;
}
.lp.on{display:block;animation:pop .16s ease}
.lp-i{
  display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;
  border:none;background:none;border-radius:8px;color:var(--body);
  font-size:13.5px;font-family:inherit;cursor:pointer;text-align:left;transition:background .12s;
}
.lp-i:hover{background:var(--bg)}
.lp-i svg{color:var(--muted);flex-shrink:0}
.lp-i.lp-danger{color:hsl(var(--danger))}
.lp-i.lp-danger svg{color:hsl(var(--danger))}

/* ================= 小型弹层 ================= */
.mini{position:fixed;inset:0;z-index:150;display:none}
.mini.on{display:flex;align-items:center;justify-content:center}
.mini .m-mask{background:rgba(12,14,18,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.mini-panel{
  position:relative;display:flex;flex-direction:column;
  width:min(500px,calc(100vw - 28px));max-height:min(82vh,680px);
  background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 90px -20px rgba(0,0,0,.45);animation:pop .22s ease;
}
.mini-head{display:flex;align-items:center;padding:14px 14px 14px 20px;border-bottom:1px solid var(--line);font-weight:700;font-size:14.5px}
.mini-head .m-nav{margin-left:auto}
.mini-body{overflow-y:auto;padding:18px 20px 22px}
.keys{width:100%;border-collapse:collapse;font-size:13px}
.keys td{padding:9px 0;border-bottom:1px dashed var(--line);color:var(--body);vertical-align:top}
.keys td:first-child{width:130px;white-space:nowrap}
.mini-note{margin-top:16px;font-size:12px;color:var(--faint);line-height:1.8}
.mg-h{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.18em;color:var(--faint);margin:18px 0 6px}
.mg-h:first-child{margin-top:0}
.mg-li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.mg-t{flex:1;font-size:13px;color:var(--body);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-btn{flex-shrink:0;font:400 12px 'Noto Sans SC',sans-serif;padding:5px 11px;border-radius:7px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.mg-btn:hover{color:var(--ink);border-color:var(--ink)}
.mg-btn.armed,.mg-btn.danger:hover{color:hsl(var(--danger));border-color:hsl(var(--danger))}
.mg-empty{font-size:12.5px;color:var(--faint);padding:6px 0}
.mg-stats{font:400 12px 'IBM Plex Mono',monospace;color:var(--muted);margin-top:20px;line-height:2.1}
.mg-io{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px dashed var(--line)}

/* ================= Toast ================= */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,14px);z-index:300;
  display:flex;align-items:center;gap:14px;max-width:min(86vw,540px);
  background:#26282E;color:#E8EAEF;border:1px solid rgba(255,255,255,.09);
  padding:11px 18px;border-radius:12px;font-size:13px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{
  border:none;background:rgba(255,255,255,.14);color:#fff;flex-shrink:0;
  font:500 12px 'Noto Sans SC',sans-serif;padding:5px 13px;border-radius:7px;cursor:pointer;transition:.15s;
}
.toast button:hover{background:rgba(255,255,255,.24)}

/* ================= 页脚 ================= */
footer{margin-top:64px;border-top:1px solid var(--line)}
.f-in{padding:32px 20px 26px}
.f-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.f-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px}
.f-slogan{color:var(--muted);font-size:12.5px}
.f-note{margin-left:auto;font:400 11px 'IBM Plex Mono',monospace;color:var(--faint);letter-spacing:.06em}
.f-bottom{margin-top:22px;padding-top:18px;border-top:1px dashed var(--line);font-size:12px;color:var(--faint);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.f-bottom a{color:var(--faint);text-decoration:none;transition:color .15s}
.f-bottom a:hover{color:hsl(var(--dev))}
.f-link{background:none;border:none;color:var(--faint);font:400 12px 'Noto Sans SC',sans-serif;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:transparent;transition:.15s}
.f-link:hover{color:var(--ink);text-decoration-color:currentColor}
.f-sep{color:var(--line2)}

/* ================= 回到顶部 ================= */
#topBtn{
  position:fixed;right:20px;bottom:22px;z-index:90;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.25);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .25s,transform .25s,color .15s;
}
#topBtn.show{opacity:1;transform:none;pointer-events:auto}
#topBtn:hover{color:hsl(var(--dev))}

/* ================= 响应式 ================= */
@media (max-width:860px){
  .fbar-main{flex-wrap:wrap}
  .chips-zone{order:1;width:100%}
  .search-box{order:2;flex:1;min-width:0}
  .search{flex:1;width:auto}
  .search:focus-within{width:auto}
  .tune-cell{order:3}
  .cnt-main{order:4;margin-left:auto}
  .f-note{margin-left:0;width:100%}
  .panel-grid{grid-template-columns:1fr 1fr;gap:14px 18px}
  .more-pop{left:0;right:auto;max-width:100%}
}
@media (max-width:640px){
  :root{--hh:52px}
  .intro{padding:40px 20px 26px}
  .search kbd{display:none}
  body[data-layout="list"] .grid .c-cover.side{width:112px}
  .panel-grid{grid-template-columns:1fr}
  .p-sum{margin-left:0;width:100%}
  /* 详情弹层:默认居中弹出(桌面同款),放大后才贴底全宽 */
  .modal.on{align-items:center}
  .modal.on.full{align-items:flex-end}   /* .full 由 JS 同步到容器(mFull 按钮) */
  .m-panel{
    width:calc(100% - 24px);max-height:88vh;max-height:88dvh;   /* 常态:左右各留 12px 呼吸空间 */
  }
  .m-panel.full{
    width:100%;max-height:96vh;max-height:96dvh;
    border-radius:18px 18px 0 0;
    border-left:none;border-right:none;border-bottom:none;      /* 放大后:全宽贴底无缝隙 */
    animation:sheetUp .3s cubic-bezier(.2,.8,.25,1);
  }
  @keyframes sheetUp{from{opacity:.4;transform:translateY(44px)}}
  
  .m-scroll{padding:22px 20px 24px}
  .m-cov{margin:-22px -20px 18px}
  .m-panel.full .m-scroll{padding:26px 22px 28px}
  .m-panel.full .m-cov{margin:-26px -22px 20px}
  .m-actions .btn{padding:10px 14px}
  .m-panel.full{max-height:96vh;max-height:96dvh;overflow:hidden}
  .c-cover.side{width:96px}
}
@media (pointer:coarse){
  .search input{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* ================= SSR 首帧防重叠(网格流兜底) =================
   JS 加载前 #grid 带 ssr-grid 类:标准 CSS 网格流式排布,
   auto-fit 自适应任意屏宽,卡片绝不重叠(行距可能偏宽,可接受)。
   水合后瀑布流引擎算出真实坐标,由 main.js 移除该类接管。
   grid-lanes 浏览器有原生瀑布流,不参与此兜底。 */
@supports not (display:grid-lanes){
  .grid.ssr-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:var(--gap,16px);
    align-items:start;
  }
  .grid.ssr-grid .card{position:relative;top:auto;left:auto;width:auto}
}

/* ================= SSR 分页组件 ================= */
.ssr-pager{
  margin:28px 0 20px;padding:16px 0 8px;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:12px;align-items:center;
}
.ssr-pager-info{font:400 12px 'IBM Plex Mono',monospace;color:var(--faint);letter-spacing:.04em}
.ssr-pager-info b{color:var(--ink);font-weight:600}
.ssr-pager-btns{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:center}
.pg-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--card);
  font:500 12.5px 'Noto Sans SC',sans-serif;color:var(--body);
  text-decoration:none;cursor:pointer;transition:border-color .15s,color .15s,background .15s;
  white-space:nowrap;
}
.pg-btn:hover{border-color:var(--ink);color:var(--ink)}
.pg-btn.pg-current{
  background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600;
}
.pg-btn.pg-disabled{
  opacity:.35;pointer-events:none;cursor:default;
}
.pg-ellipsis{color:var(--faint);padding:0 4px;font-size:13px}
.pg-jump{display:inline-flex;gap:5px;align-items:center;margin-left:8px}
.pg-jump input{
  width:56px;height:32px;padding:0 8px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--ink);font:400 12.5px 'IBM Plex Mono',monospace;
  text-align:center;outline:none;
}
.pg-jump input:focus{border-color:var(--ink)}
.pg-go{font-weight:500}
@media (max-width:640px){
  .ssr-pager-btns{gap:3px}
  .pg-btn{min-width:28px;height:28px;padding:0 7px;font-size:12px}
  .pg-jump{margin-left:0}
}