/* ============================================================
   爆款元素库（#p17s0）· 已并入「企业素材库」
   ------------------------------------------------------------
   独立文件，只作用于 #p17s0；删掉 index.html 里这一行即回退：
       <link rel="stylesheet" href="/element-lib.css?v=1">
   颜色走 tokens.css 令牌，未定义时用原值兜底。
   ============================================================ */

#p17s0 .el-hero{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:20px 22px;margin:0 0 14px;border-radius:20px;overflow:hidden;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(37,99,235,.10), transparent 55%),
    radial-gradient(120% 160% at 100% 0%, rgba(124,58,237,.08), transparent 55%),
    var(--c-surface,#fff);
  border:1px solid var(--c-line-2,#e6ecf5);
  box-shadow:0 10px 30px rgba(37,99,235,.06);
}
#p17s0 .el-hero-main{display:flex;align-items:center;gap:14px;flex:1 1 280px;min-width:0;min-width:0}
#p17s0 .el-hero-badge{
  width:52px;height:52px;border-radius:16px;flex:0 0 52px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  box-shadow:0 10px 22px rgba(37,99,235,.26);
}
#p17s0 .el-hero-badge .ic{width:26px;height:26px}
#p17s0 .el-hero-copy{min-width:0}
#p17s0 .el-title{
  font-size:21px;font-weight:700;letter-spacing:-.2px;line-height:1.25;
  color:var(--c-text-1,#1d1d1f);margin:0 0 4px;
}
#p17s0 .el-sub{
  font-size:12.5px;line-height:1.6;color:var(--c-text-3,#6b7280);margin:0;max-width:640px;
}
#p17s0 .el-hero-stats{display:flex;gap:8px;flex:0 0 auto}
#p17s0 .el-stat{
  min-width:72px;padding:8px 12px;border-radius:12px;text-align:center;
  background:rgba(255,255,255,.72);border:1px solid var(--c-line-2,#e8eef7);
}
#p17s0 .el-stat b{
  display:block;font-size:19px;line-height:1.1;font-weight:700;
  color:var(--c-brand-ink,#2563eb);font-variant-numeric:tabular-nums;
}
#p17s0 .el-stat span{display:block;margin-top:3px;font-size:11px;color:var(--c-text-3,#8b95a5)}

/* 工具条：搜索 + 新建分类 */
#p17s0 .el-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 12px;margin:0 0 14px;border-radius:14px;
  background:var(--c-surface,#fff);border:1px solid var(--c-line-2,#e9eef6);
}
#p17s0 .el-search{
  display:flex;align-items:center;gap:8px;flex:1 1 260px;min-width:0;max-width:420px;
  height:36px;padding:0 10px;border-radius:10px;
  background:var(--c-fill-2,#f5f6f8);border:1px solid transparent;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
#p17s0 .el-search:focus-within{
  background:#fff;border-color:var(--c-brand,#2563eb);
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}
#p17s0 .el-search .ic{width:16px;height:16px;flex:0 0 16px;color:var(--c-text-3,#8b95a5)}
#p17s0 .el-search-input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-size:13px;color:var(--c-text-1,#1d1d1f);
}
#p17s0 .el-search-input::placeholder{color:var(--c-text-3,#a0a8b5)}
#p17s0 .el-search-clear{
  display:flex;align-items:center;justify-content:center;width:20px;height:20px;
  border:0;border-radius:50%;background:rgba(0,0,0,.06);color:#666;cursor:pointer;padding:0;
}
#p17s0 .el-search-clear .ic{width:12px;height:12px}
#p17s0 .el-toolbar-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
#p17s0 .el-cat-input{width:170px;height:36px}
#p17s0 .el-toolbar-right .btn{height:36px;display:inline-flex;align-items:center;gap:5px}
#p17s0 .el-toolbar-right .btn .ic{width:14px;height:14px}

/* 分类卡片 */
#p17s0 .el-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:14px;align-items:start}
#p17s0 .el-cat{
  border-radius:16px;background:var(--c-surface,#fff);
  border:1px solid var(--c-line-2,#e9eef6);
  box-shadow:0 2px 10px rgba(17,24,39,.04);
  padding:14px;transition:box-shadow .2s,border-color .2s,transform .2s;
}
#p17s0 .el-cat:hover{box-shadow:0 12px 28px rgba(37,99,235,.10);border-color:rgba(37,99,235,.28);transform:translateY(-1px)}
#p17s0 .el-cat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
#p17s0 .el-cat-name{display:flex;align-items:center;gap:8px;min-width:0;font-size:14.5px;font-weight:650;color:var(--c-text-1,#1d1d1f)}
#p17s0 .el-cat-ic{
  width:28px;height:28px;flex:0 0 28px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  color:var(--c-brand-ink,#2563eb);background:var(--c-brand-soft,#e8f0fe);
}
#p17s0 .el-cat-ic .ic{width:15px;height:15px}
#p17s0 .el-cat-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#p17s0 .el-cat-count{
  flex:0 0 auto;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:600;
  color:var(--c-brand-ink,#2563eb);background:var(--c-brand-soft,#e8f0fe);font-variant-numeric:tabular-nums;
}
#p17s0 .el-cat-del{
  flex:0 0 auto;display:flex;align-items:center;gap:4px;
  height:28px;padding:0 9px;border-radius:8px;cursor:pointer;
  border:1px solid transparent;background:transparent;
  font-size:12px;color:var(--c-text-3,#8b95a5);
  transition:color .18s,background .18s,border-color .18s;
}
#p17s0 .el-cat-del .ic{width:13px;height:13px}
#p17s0 .el-cat-del:hover{color:#dc2626;background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.18)}

/* 元素网格 */
#p17s0 .el-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(132px,100%),1fr));gap:10px}
#p17s0 .el-item{
  position:relative;border-radius:12px;overflow:hidden;
  background:var(--c-fill-2,#f5f6f8);border:1px solid transparent;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
#p17s0 .el-item:hover{border-color:rgba(37,99,235,.24);box-shadow:0 8px 20px rgba(17,24,39,.08);transform:translateY(-2px)}
#p17s0 .el-thumb{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#e8e8ed}
#p17s0 .el-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
#p17s0 .el-item:hover .el-thumb img{transform:scale(1.04)}
#p17s0 .el-thumb-ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#aeb6c4;background:linear-gradient(135deg,#eef1f6,#e3e8f0);
}
#p17s0 .el-thumb-ph .ic{width:22px;height:22px}
#p17s0 .el-item-acts{
  position:absolute;right:6px;top:6px;display:flex;gap:4px;
  opacity:0;transform:translateY(-3px);transition:opacity .18s,transform .18s;
}
#p17s0 .el-item:hover .el-item-acts,#p17s0 .el-item:focus-within .el-item-acts{opacity:1;transform:none}
#p17s0 .el-act{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:8px;cursor:pointer;padding:0;
  background:rgba(17,24,39,.62);color:#fff;backdrop-filter:blur(4px);
  transition:background .18s;
}
#p17s0 .el-act .ic{width:13px;height:13px}
#p17s0 .el-act:hover{background:rgba(37,99,235,.92)}
#p17s0 .el-act.el-act-del:hover{background:rgba(220,38,38,.92)}
#p17s0 .el-item-body{padding:7px 8px 8px}
#p17s0 .el-word{
  font-size:12.5px;line-height:1.45;color:var(--c-text-1,#1d1d1f);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;
}
#p17s0 .el-meta{margin-top:3px;font-size:11px;color:var(--c-text-3,#9aa3b2)}

/* 空状态 */
#p17s0 .el-cat-empty{
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  padding:22px 10px;border-radius:12px;text-align:center;
  background:var(--c-fill-2,#f7f8fa);border:1px dashed var(--c-line-2,#e2e8f0);
  font-size:12px;color:var(--c-text-3,#8b95a5);
}
#p17s0 .el-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:56px 20px;border-radius:18px;text-align:center;
  background:var(--c-surface,#fff);border:1px dashed var(--c-line-2,#e2e8f0);
}
#p17s0 .el-empty-ic{
  width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  color:var(--c-brand-ink,#2563eb);background:var(--c-brand-soft,#e8f0fe);margin-bottom:2px;
}
#p17s0 .el-empty-ic .ic{width:24px;height:24px}
#p17s0 .el-cat-empty .ic{width:18px;height:18px;opacity:.75}
#p17s0 .el-empty b{font-size:14px;color:var(--c-text-1,#1d1d1f);font-weight:600}
#p17s0 .el-empty span{font-size:12.5px;color:var(--c-text-3,#8b95a5);line-height:1.6;max-width:380px}
#p17s0 .el-empty .btn{margin-top:8px}

/* 窄屏 */
@media (max-width:760px){
  #p17s0 .el-hero{flex-direction:column;align-items:stretch;gap:14px;padding:16px}
  #p17s0 .el-hero-main{flex:0 0 auto}
  #p17s0 .el-hero-stats{justify-content:flex-start}
  #p17s0 .el-hero-badge{width:44px;height:44px;flex-basis:44px;border-radius:13px}
  #p17s0 .el-title{font-size:19px}
  #p17s0 .el-toolbar{align-items:stretch}
  #p17s0 .el-search{flex:1 1 100%;max-width:none}
  #p17s0 .el-toolbar-right{width:100%}
  #p17s0 .el-cat-input{flex:1 1 auto;width:auto;min-width:0}
  #p17s0 .el-cats{grid-template-columns:1fr}
  #p17s0 .el-grid{grid-template-columns:repeat(auto-fill,minmax(min(112px,100%),1fr))}
  /* 触屏没有 hover：操作按钮常驻 */
  #p17s0 .el-item-acts{opacity:1;transform:none}
}