/* ==========================================================================
   my-tools.css — 「我的收藏」「最近使用」两个列表页
   数据全部来自浏览器 localStorage（jqc.favorites.v1 / jqc.recent.v1），
   由 my-tools.js 渲染，服务端只出页面骨架。卡片样式复用 category.css。
   ========================================================================== */

.mt-wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--page-gutter) 8px; }

/* 页头：标题 + 说明 + 计数 + 清空 */
.mt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px; padding: 18px 22px;
  background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
}
.mt-head-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mt-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.mt-info { min-width: 0; }
.mt-info h1 { margin: 0 0 4px; font-size: 19px; line-height: 1.3; }
.mt-info p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--gray-500); }
.mt-icon.tint-red { color: var(--red-500); }
.mt-icon.tint-blue { color: var(--blue-700); }
.mt-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.mt-count { font-size: 12.5px; color: var(--gray-500); }

/* 收藏卡的取消按钮：卡片本身就是链接，所以用 span 接管点击 */
.mt-del {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  width: 24px; height: 24px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--gray-500);
  background: var(--surface); border: 1px solid var(--gray-200);
  opacity: 0; transition: var(--transition); cursor: pointer;
}
.tool-card:hover .mt-del { opacity: 1; }
.mt-del:hover, .mt-del:focus-visible {
  color: var(--red-500); opacity: 1;
  border-color: var(--primary);
  background: var(--tint-red);
}

/* 空状态里的返回按钮，与说明文字拉开一点距离 */
.mt-empty .ui-btn { margin-top: 6px; }

/* .ui-empty 自带 display:flex，会盖掉 hidden 的默认 display:none，必须显式压回去 */
.mt-empty[hidden] { display: none !important; }

@media (max-width: 768px) {
  .mt-head { padding: 16px 18px; }
  .mt-info h1 { font-size: 17px; }
  .mt-actions { width: 100%; justify-content: space-between; }
  .mt-del { opacity: 1; }
}