/* =========================================================
   LiteBox v5 · home.css — 首页 / 搜索 / 分类 dock / 工具卡片
   全部只用 tokens 变量（含 Step 2 新增：--ring-lg/--chip-shadow/
   --fav-gold/--ct-ic-bg）。
   ========================================================= */

/* ---------- Hero（Step 12 · A1~A3：保留 hero，只做压缩 + 精致化） ----------
   Step 11 曾把 hero 整块删掉，Step 12 按任务书恢复（删 hero 的方案作废）。 */
/* hero 用的是 <header> 标签，会吃到 layout.css 里顶栏 header 的 sticky / 高度 / 毛玻璃，
   这里逐条重置回普通块级元素（原 Step 5D 就有的处理，恢复时一并带回）。 */
header.hero{
  position:static;top:auto;z-index:auto;height:auto;
  background:none;border:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.hero{text-align:center;padding:28px 16px 20px}   /* A2：原 72px 46px → 28px 20px */
.hero h1{
  margin:0;
  font-size:clamp(28px,5vw,40px);letter-spacing:.5px;line-height:1.2;font-weight:900;
  /* A3：三段品牌渐变文字（第三段 --brand3 收口在 tokens.css） */
  background:var(--brand-grad-3);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero p{font-size:14px;color:var(--fg2);max-width:480px;margin:10px auto 0}

/* ---------- 分类 dock（sticky 玻璃条） ----------
   Step 23 · 五：搜索框搬进顶栏 header 后，首页只剩顶栏一层吸顶，
   分类条直接贴在 header 下沿（--search-h 与 .search-wrap 已整体删除）。 */
.home-cat-nav{
  position:sticky;top:var(--head-h);z-index:65;
  margin:10px 0 12px;padding:7px;border-radius:22px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(26px) saturate(1.9);-webkit-backdrop-filter:blur(26px) saturate(1.9);
  box-shadow:var(--shadow-sm);
}
.chip-bar{display:flex;gap:5px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.chip-bar::-webkit-scrollbar{display:none}
.home-cat-nav .chip{
  flex:0 0 auto;padding:9px 14px;border-radius:var(--radius-pill);
  font-size:13px;font-weight:700;color:var(--fg2);
  background:var(--card);border:1px solid var(--line);
  scroll-snap-align:start;
  transition:color 200ms,background 200ms,border-color 200ms,box-shadow 200ms,transform var(--dur) var(--ease-spring);
}
.home-cat-nav .chip:active{transform:scale(.94)}
.home-cat-nav .chip:hover,.home-cat-nav .chip.on{
  color:var(--on-accent);background:var(--brand-grad);border-color:transparent;
  box-shadow:var(--chip-shadow);
}
.home-cat-nav .chip .ch-ic{font-size:13px}
.home-cat-nav .chip .ch-n{margin-left:2px;font-size:11px;font-weight:800;opacity:.65;font-variant-numeric:tabular-nums}

/* ---------- 区块标题 ---------- */
.cat-title{display:flex;align-items:center;gap:9px;margin:34px 0 6px;font-size:16px;font-weight:800;color:var(--fg)}
.cat-title .ct-ic{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:grid;place-items:center;font-size:15px;font-style:normal;
  background:var(--ct-ic-bg);color:var(--brand1);
}
.cat-title .ct-n{
  min-width:21px;padding:0 7px;border-radius:var(--radius-pill);
  font-size:11.5px;font-weight:800;line-height:20px;text-align:center;
  background:var(--card2);color:var(--fg3);font-variant-numeric:tabular-nums;
}
.cat-title .ct-line{flex:1;height:2px;background:linear-gradient(90deg,var(--line),transparent);margin-left:6px}

/* ---------- 工具网格与卡片 ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-top:14px}
@media(max-width:1000px){.tool-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.tool-grid{grid-template-columns:repeat(2,1fr);gap:9px}}
.tool-card{
  width:100%;text-align:left;position:relative;
  padding:14px 13px;min-height:108px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);cursor:pointer;
  transition:transform .26s var(--ease-spring),box-shadow .26s,border-color .2s;
}
.tool-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand1) 45%,transparent);box-shadow:var(--shadow)}
.tool-card:active{transform:scale(.97)}
.tool-card .ic{
  width:31px;height:31px;border-radius:10px;
  display:grid;place-items:center;font-size:16px;margin-bottom:7px;
  color:var(--on-accent); /* 渐变底色由 JS 注入分类渐变 */
}
.tool-card h3{font-size:14px;font-weight:800;color:var(--fg);display:flex;align-items:center;gap:6px}
.tool-card h3 .go{margin-left:auto;color:var(--fg3);font-size:13px}
.tool-card p{
  font-size:11px;color:var(--fg3);line-height:1.42;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tool-card .fav-btn{
  position:absolute;top:10px;right:10px;z-index:2;
  width:20px;height:20px;opacity:.32;font-size:15px;line-height:1;
  transition:opacity .18s,transform .18s,color 200ms;
}
.tool-card .fav-btn:hover{opacity:1;transform:scale(1.18)}
.tool-card .fav-btn.on{opacity:1;color:var(--fav-gold)}
@media(max-width:640px){.tool-card{min-height:102px;padding:11px 12px}}

/* ---------- 空态（首页区块级） ----------
   Step 11 · A7：图标 / 标题 / 副标题统一走 components.css 的
   .empty-state .es-icon / .es-title / .es-sub（与 ui/empty.js 同一套类名），
   此处只按首页密度收紧内边距，不再重复定义字号与颜色。 */
#favEmpty,#emptyTip{min-height:0;padding:36px 16px}

/* ---------- 分类弹层宫格 ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding-bottom:8px}
@media(max-width:420px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
.cat-cell{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:13px 12px;border-radius:14px;text-align:left;
  background:var(--card2);border:1px solid var(--line);
  transition:transform var(--dur) var(--ease-spring),border-color 200ms,background 200ms;
}
.cat-cell:active{transform:scale(.95)}
.cat-cell:hover{border-color:color-mix(in srgb,var(--brand1) 40%,transparent)}
.cat-cell .cc-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;color:var(--on-accent)}
.cat-cell .cc-tx{font-size:13px;font-weight:700;color:var(--fg)}
.cat-cell b{font-size:11.5px;font-weight:700;color:var(--fg3);font-variant-numeric:tabular-nums}

/* ---------- 「我的」弹层：最近使用 chips ---------- */
.recent-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.recent-chips .rchip{
  padding:5px 11px;border-radius:var(--radius-pill);
  background:var(--card2);border:1px solid var(--line);
  font-size:12px;font-weight:600;color:var(--fg2);
  transition:transform var(--dur) var(--ease-spring),color 200ms,border-color 200ms;
}
.recent-chips .rchip:active{transform:scale(.94)}
.recent-chips .rchip:hover{color:var(--brand1);border-color:color-mix(in srgb,var(--brand1) 40%,transparent)}

/* ---------- 弹层打开锁滚动（body.scroll-lock 由 ui/sheet.js 控制） ---------- */
body.scroll-lock{overflow:hidden}
.sheet{overscroll-behavior:contain}