/*
 * 工具中心 · 磨砂玻璃卡片
 *
 * ── 为什么重做 ────────────────────────────────────────
 *
 * 原来每张卡片是：标题 + 一整段说明 + 状态胶囊 + 处理方式胶囊
 * + 收藏/复制链接/打开工具三个按钮，竖着堆五行。
 *
 * 桌面端还能看，手机上一张卡就占大半屏 —— 截图里滑三屏才看到三个工具。
 * 而说明文字（「按作物与症状分步填写，提交后凭查询码查看回复」）
 * 是给第一次来的人看的，天天用的人每次都要读一遍它才能找到工具。
 *
 * 所以这版把卡片压成【图标 + 名称 + 一行状态】，说明移到 title 悬浮提示，
 * 需要时才出现，不占版面。手机两列、平板三列、桌面四列，一屏能看全一类。
 *
 * ── 磨砂玻璃要有东西可磨 ──────────────────────────────
 *
 * backdrop-filter 只在背后有内容时才看得出效果。页面原来是一层
 * 近乎纯白的渐变，糊上去和不糊一样。所以 body 上加了几团很淡的色斑，
 * 卡片压在色斑上才有通透感。色斑用 fixed 定位，滚动时卡片扫过不同色区。
 */

/* ── 背景：给磨砂提供底色 ───────────────────────────── */
body.ys-tools-glass{
  background:
    radial-gradient(58vw 46vw at 8% -6%, rgba(45,122,78,.16), transparent 62%),
    radial-gradient(46vw 40vw at 96% 4%, rgba(201,150,42,.13), transparent 60%),
    radial-gradient(64vw 52vw at 74% 96%, rgba(26,77,46,.12), transparent 66%),
    linear-gradient(180deg,#f4f9f5 0%,#eef6f0 46%,#f7fbf8 100%);
  background-attachment: fixed;
}

/* ── 分类标题 ───────────────────────────────────────── */
.ys-tools-glass .cat{margin-bottom:26px}
.ys-tools-glass .cat h2{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:17px;font-weight:800;color:#123f26;margin:0 0 14px;
  padding:0 2px 10px;border-bottom:1px solid rgba(26,77,46,.13);
}
.ys-tools-glass .cat h2 span{color:#7c8c82;font-size:12px;font-weight:500;white-space:nowrap}

/* ── 网格：四列起步，逐档收窄 ───────────────────────── */
body.ys-tools-glass main .cat .grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}

/* ── 卡片本体 ───────────────────────────────────────── */
body.ys-tools-glass main a.tool{
  position:relative;
  display:flex;flex-direction:column;
  /* 等高：一行里的卡片不因名称换行而参差 */
  min-height:132px;
  padding:16px 15px 14px;
  border-radius:18px;
  text-decoration:none;color:inherit;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:
    0 10px 30px rgba(20,83,45,.09),
    inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  overflow:hidden;
}
/* 顶部一道高光，玻璃的厚度感来自这里 */
.ys-tools-glass a.tool::before{
  content:'';position:absolute;inset:0 0 auto;height:52%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);
  pointer-events:none;
}
.ys-tools-glass a.tool:hover,
.ys-tools-glass a.tool:focus-visible{
  transform:translateY(-3px);
  background:rgba(255,255,255,.76);
  border-color:rgba(45,122,78,.34);
  box-shadow:
    0 18px 40px rgba(20,83,45,.16),
    inset 0 1px 0 rgba(255,255,255,.95);
  outline:none;
}
.ys-tools-glass a.tool:active{transform:translateY(-1px)}

/* ── 图标：说明文字拿掉之后，靠它做第一眼识别 ───────── */
.ys-tools-glass .tool-ico{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-bottom:11px;
  border-radius:12px;
  font-size:19px;line-height:1;
  background:linear-gradient(145deg,rgba(45,122,78,.14),rgba(45,122,78,.06));
  border:1px solid rgba(45,122,78,.16);
}

/* ── 名称 ───────────────────────────────────────────── */
.ys-tools-glass a.tool b{
  position:relative;z-index:1;
  display:block;
  color:#123f26;font-size:14.5px;font-weight:800;line-height:1.4;
  letter-spacing:.01em;
  /* 最多两行，超出省略 —— 保证卡片等高 */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* 说明文字整体隐藏（保留在 DOM 里供搜索与 title 使用） */
.ys-tools-glass a.tool > span:not(.tool-ico):not(.tag-new){display:none}
.ys-tools-glass a.tool .tag-new{display:none}

/* ── 状态行：一行搞定，不再堆三行胶囊 ───────────────── */
.ys-tools-glass .tool-meta{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:6px;
  margin-top:auto;padding-top:10px;
  font-size:11px;color:#66786d;
}
.ys-tools-glass .tool-chip{
  display:inline-flex;align-items:center;
  padding:2px 7px;border-radius:999px;
  font-size:10.5px;font-weight:700;line-height:1.6;
  background:rgba(232,244,236,.85);color:#2d7a4e;
  border:1px solid rgba(45,122,78,.18);
  white-space:nowrap;
}
.ys-tools-glass .tool-chip.warn{
  background:rgba(255,247,232,.9);color:#96670f;border-color:rgba(201,150,42,.32);
}
/* 「本地处理 / 接口协同」降一级，它是次要信息 */
.ys-tools-glass .tool-chip.soft{
  background:transparent;color:#7b8b81;border-color:rgba(26,77,46,.14);font-weight:600;
}

/* ── 操作：收起成右上角图标，不再占一整行 ───────────── */
.ys-tools-glass .tool-actions{
  position:absolute;top:10px;right:10px;z-index:2;
  display:flex;gap:4px;
  opacity:0;transform:translateY(-3px);
  transition:opacity .18s ease, transform .18s ease;
}
.ys-tools-glass a.tool:hover .tool-actions,
.ys-tools-glass a.tool:focus-within .tool-actions{opacity:1;transform:none}
/* 已收藏的星要一直可见，否则收藏了也看不出来 */
.ys-tools-glass .tool-actions:has(.tool-action.faved){opacity:1;transform:none}

.ys-tools-glass .tool-action{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:9px;
  border:1px solid rgba(26,77,46,.14);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#2d7a4e;font-size:13px;line-height:1;
  cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.ys-tools-glass .tool-action:hover{background:#eaf5ee;border-color:rgba(45,122,78,.34)}
.ys-tools-glass .tool-action.faved{background:#c9962a;color:#fff;border-color:#c9962a}
/* 「打开工具」多余 —— 整张卡就是链接 */
.ys-tools-glass .tool-action[data-open-action]{display:none}

/* ── 搜索条 ─────────────────────────────────────────── */
.ys-tools-glass .tools-filter{
  display:flex;align-items:center;gap:12px;margin:0 0 22px;padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 10px 28px rgba(20,83,45,.08);
}
.ys-tools-glass .tools-search{
  flex:1;min-width:0;min-height:44px;
  border:1px solid rgba(26,77,46,.14);border-radius:12px;
  padding:10px 14px;background:rgba(255,255,255,.86);
  color:#1e2a23;font-size:15px;font-family:inherit;outline:none;
}
.ys-tools-glass .tools-search:focus{
  border-color:#2d7a4e;box-shadow:0 0 0 3px rgba(45,122,78,.13);
}
.ys-tools-glass .tools-filter-note{flex:0 0 auto;color:#6d7d73;font-size:12.5px;white-space:nowrap}

/* ── 筛选标签 ───────────────────────────────────────── */
.ys-tools-glass .filter-tab{
  border:1px solid rgba(26,77,46,.16);
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#174c2d;border-radius:999px;
  min-height:36px;padding:7px 14px;
  font-size:12.5px;font-weight:700;cursor:pointer;
}
.ys-tools-glass .filter-tab.active{background:#174c2d;color:#fff;border-color:#174c2d}

/* ── 响应式 ─────────────────────────────────────────── */
@media (max-width:1180px){
  body.ys-tools-glass main .cat .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  body.ys-tools-glass main .cat .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:640px){
  .ys-tools-glass main{padding:16px 14px 44px}
  /*
   * 手机仍然保持两列。
   * 单列时一张卡横跨整屏、高度又被内容撑开，就成了截图里那样 ——
   * 一屏一个工具。两列 + 定高，一屏能看到六个。
   */
  body.ys-tools-glass main .cat .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.ys-tools-glass main a.tool{min-height:112px;padding:13px 12px 11px;border-radius:15px}
  .ys-tools-glass .tool-ico{width:32px;height:32px;font-size:16px;margin-bottom:8px;border-radius:10px}
  .ys-tools-glass a.tool b{font-size:13px}
  .ys-tools-glass .tool-meta{padding-top:8px;gap:4px}
  .ys-tools-glass .tool-chip{font-size:10px;padding:1px 6px}
  /* 触屏没有 hover，操作按钮常驻但缩小 */
  .ys-tools-glass .tool-actions{opacity:1;transform:none;top:8px;right:8px;gap:3px}
  .ys-tools-glass .tool-action{width:26px;height:26px;border-radius:8px;font-size:12px}
  .ys-tools-glass .cat h2{font-size:15.5px;flex-direction:column;align-items:flex-start;gap:3px}
  .ys-tools-glass .tools-filter{flex-direction:column;align-items:stretch;gap:8px}
  .ys-tools-glass .tools-filter-note{text-align:right}
}
@media (max-width:360px){
  body.ys-tools-glass main .cat .grid{grid-template-columns:1fr}
  body.ys-tools-glass main a.tool{min-height:auto}
}

/* 触屏一律常驻操作按钮：不靠屏幕宽度判断，靠有没有 hover 能力 */
@media (hover:none){
  .ys-tools-glass .tool-actions{opacity:1;transform:none}
}

/* 减少动效偏好 */
@media (prefers-reduced-motion:reduce){
  .ys-tools-glass a.tool,
  .ys-tools-glass .tool-actions{transition:none}
  .ys-tools-glass a.tool:hover{transform:none}
}

/*
 * backdrop-filter 不支持时的兜底：直接给不透明底色。
 * 不加这条的话，老浏览器上卡片是半透明的，背景色斑透上来，字看不清。
 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ys-tools-glass a.tool,
  .ys-tools-glass .tools-filter,
  .ys-tools-glass .tool-action{background:#fff}
  .ys-tools-glass .filter-tab{background:#fff}
}