/* 快捷导航「文件夹」弹窗（v63）
   入口：header 快捷条上的 .qs[data-qf]；内容：/api/qlink-folder/{id} 服务端渲染
   站点卡片复刻首页「今日精选」(.pick)，文章用这里的紧凑列表（blog.css 只在文章页加载） */

/* 弹窗容器：默认 980px 居中，手机上变成底部抽屉 */
.modal .box.qf-box{
  max-width:980px;width:min(980px,94vw);padding:0;text-align:left;
  display:flex;flex-direction:column;max-height:min(86vh,880px);overflow:hidden;border-radius:20px;
}

/* 头部：图标 + 标题 + 数量 + 关闭 */
.qf-box .qf-hd{display:flex;align-items:center;gap:11px;padding:15px 18px;flex:none;border-bottom:1px solid var(--card-border)}
.qf-box .qf-hico{
  width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:19px;
  color:#5b5ef0;background:linear-gradient(135deg,#eef0ff,#e6e9ff);border:1px solid #e0e3ff;
}
.qf-box .qf-htx{flex:1;min-width:0}
.qf-box .qf-title{display:block;font-size:15.5px;font-weight:800;line-height:1.35;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qf-box .qf-sub{display:block;margin-top:2px;font-size:11.5px;font-style:normal;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qf-box .qf-num{
  flex:none;height:22px;padding:0 9px;display:inline-flex;align-items:center;border-radius:999px;
  font-size:11px;font-weight:700;color:#5b5ef0;background:#eef0ff;font-variant-numeric:tabular-nums;
}
/* 数量为 0 时整体隐藏（hidden 属性优先于上面的 display） */
.qf-box .qf-num[hidden]{display:none}
/* 关闭按钮：去掉全局 button 描边，改成轻量幽灵按钮，hover 才出现底色
   注意：按钮在 .qf-hd 里，不是 .qf-box 的直接子元素，选择器不能用 > */
.modal .box.qf-box .qf-x{
  position:static;top:auto;right:auto;flex:none;width:32px;height:32px;margin:0 0 0 4px;padding:0;
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
  border:0;background:transparent;color:var(--muted);border-radius:10px;box-shadow:none;outline:0;
  display:grid;place-items:center;font-size:15px;line-height:1;
  transition:background .18s,color .18s,transform .18s;
}
.modal .box.qf-box .qf-x:hover{background:var(--surface-2);color:var(--text);border:0;transform:rotate(90deg)}
.modal .box.qf-box .qf-x:active{transform:rotate(90deg) scale(.94)}

/* 主体：可滚动 */
.qf-box .qf-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px 16px 18px;-webkit-overflow-scrolling:touch}

/* 站点网格：电脑 / 手机统一一行两个，卡片样式全部继承首页 .pick（今日精选） */
.qf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* 一行两个宽度更充裕，描述最多两行（超长省略） */
.qf-pick .pick-b em{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;white-space:normal;line-height:1.45;
}

/* 文章列表 */
.qf-arts{display:flex;flex-direction:column;gap:6px}
.qf-art{
  display:flex;gap:12px;padding:10px;border-radius:14px;border:1px solid transparent;
  text-decoration:none;color:var(--text);transition:background .18s,border-color .18s,transform .18s;
}
.qf-art:hover{background:var(--surface-2);border-color:var(--card-border);transform:translateY(-1px)}
.qf-art-cv{
  position:relative;width:108px;height:70px;flex:none;border-radius:11px;overflow:hidden;
  display:grid;place-items:center;background:var(--bg);border:1px solid var(--card-border);color:var(--muted);font-size:20px;
}
.qf-art-cv img{width:100%;height:100%;object-fit:cover;display:block}
.qf-art-pin{
  position:absolute;left:6px;top:6px;height:16px;padding:0 5px;display:inline-flex;align-items:center;
  border-radius:5px;font-style:normal;font-size:9.5px;font-weight:700;color:#fff;background:rgba(91,94,240,.9);
}
.qf-art-bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.qf-art-tt{display:block;font-size:13px;font-weight:700;line-height:1.4;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qf-art:hover .qf-art-tt{color:var(--accent)}
.qf-art-ds{display:block;font-size:11.5px;line-height:1.5;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qf-art-mt{display:flex;align-items:center;gap:12px;margin-top:2px;font-size:11px;color:var(--muted);min-width:0}
.qf-art-mt span{display:inline-flex;align-items:center;gap:4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 空状态 */
.qf-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:52px 10px;color:var(--muted)}
.qf-empty i{font-size:34px;opacity:.5}
.qf-empty b{font-size:13.5px;font-weight:700;color:var(--text-2)}
.qf-empty em{font-style:normal;font-size:11.5px}

/* 加载中 */
.qf-loading{display:flex;flex-direction:column;align-items:center;gap:10px;padding:64px 10px;color:var(--muted);font-size:12px}
.qf-loading span{
  width:26px;height:26px;border-radius:50%;border:2.5px solid var(--border);border-top-color:var(--accent);
  animation:qf-spin .8s linear infinite;
}
.qf-loading em{font-style:normal}
@keyframes qf-spin{to{transform:rotate(360deg)}}

/* 快捷条：文件夹入口可点击（点击后弹窗，不跳转） */
.qstrip .qs[data-qf]{cursor:pointer}
/* 文件夹入口右上角数量改用强调色，和分类入口区分开 */
.qstrip .qs[data-qf] em{background:#e6e9ff;color:#4f46e5;border-color:#fff}

/* 平板：仍是一行两个，只收紧间距 */
@media (max-width:900px){
  .qf-grid{gap:10px}
}

/* 手机：底部抽屉；站点区与电脑端完全同款（一行两个），只压缩弹窗内边距 */
@media (max-width:640px){
  .modal.qf-modal{align-items:flex-end;padding:0}
  .modal .box.qf-box{
    max-width:100%;width:100%;max-height:88vh;border-radius:18px 18px 0 0;border-bottom:0;
    animation:qf-up .26s cubic-bezier(.22,.61,.36,1);
  }
  .qf-box .qf-hd{padding:13px 14px}
  .qf-box .qf-body{padding:10px 12px calc(16px + env(safe-area-inset-bottom))}
  /* 站点卡片：nav.css 手机端会把 .pick 改成竖排并隐藏描述，
     这里恢复成「图标在左、右侧上标题下描述」的横排，角标左上 / 平台图标右上保持不变 */
  .qf-grid .qf-pick{
    flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;
    padding:8px;border-radius:12px;text-align:left;
  }
  .qf-grid .qf-pick .pick-ico{width:34px;height:34px;border-radius:9px;font-size:17px;flex:none}
  .qf-grid .qf-pick .pick-b{flex:1;min-width:0;width:auto}
  .qf-grid .qf-pick .pick-b b{font-size:12px;justify-content:flex-start;gap:3px}
  .qf-grid .qf-pick .pick-b em{
    display:-webkit-box;margin-top:2px;font-size:10px;line-height:1.4;white-space:normal;
    -webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  }
  .qf-grid .qf-pick > .pf{top:0;right:4px}
  .qf-art{padding:9px;gap:10px}
  .qf-art-cv{width:86px;height:62px}
  .qf-art-tt{font-size:12.5px}
  .qf-art-ds{display:none}
}
@keyframes qf-up{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}