/* 标签筛选页（按设计图重构）· 全部以 .tf 为命名空间 */
.tf{--bg:#f2f6fc;--card:#fff;--line:#e3eaf4;--txt:#616878;;--sub:#7a869b;--bac:#4a78d0;--ac:#1f6bff;--soft:#eaf1ff;--chip:#f1f4f9;--tit:#416ca0;--tag:#416ca0;--bgt:linear-gradient(135deg, #ff6eed 0%, #e976e9 50%, #ddbf34 100%);
  display:block;background:var(--bg);color:var(--tit);font-size:14px;line-height:1.5;padding-bottom:40px}
html[data-theme=dark] .tf{--bg:#0e1424;--card:#161d31;--line:#252e47;--txt:#e8edf8;--sub:#8591aa;--ac:#4c8dff;--soft:#1b2a4d;--chip:#1f2842}
.tf *{box-sizing:border-box}
.tf button{font-family:inherit}
.tf-i{width:1.5em;height:1.5em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.125em;padding-top: 2px;}
.tf-wrap{max-width:1200px;margin:0 auto;padding:0 12px}
.tf :focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* Banner：背景图 /img/tags-hero.svg，可换成自己的图片 */
.tf-hero{--hero-img:url(/css/img/tag-bg1.webp);position:relative;min-height:150px;padding:28px 0 26px;background:var(--hero-img) center/cover no-repeat,linear-gradient(115deg,#cfe4ff,#f6e6fb 70%,#ffe7ee)}
.tf-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.82),rgba(255,255,255,.4) 45%,rgba(255,255,255,0) 72%)}
html[data-theme=dark] .tf-hero:before{background:linear-gradient(90deg,rgba(10,14,28,.88),rgba(10,14,28,.5) 50%,rgba(10,14,28,.15))}
.tf-hero .tf-wrap{position:relative}
.tf-hero h1{margin:0;font-size:34px;font-weight:800;letter-spacing:1px;background: linear-gradient(135deg, #ff6eed 0%, #dd6c2f 50%, #ddbf34 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tf-hero p{margin:4px 0 0;color:var(--sub);font-size:15px}
.tf-ht{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:760px;margin-top:16px}
.tf-ht-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tf-ht b{margin-right:2px;color:var(--sub);font-size:13px;font-weight:600}
.tf-ht a{height:28px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.8);backdrop-filter:blur(4px);color:var(--txt);font-size:13px;line-height:28px;text-decoration:none;box-shadow:0 2px 8px -3px rgba(30,60,130,.35);transition:.15s}
.tf-ht a:hover{background:linear-gradient(90deg, #ff9eb8, #c3aaff);;color:#fff}
html[data-theme=dark] .tf-ht a{background:rgba(30,40,70,.8)}

.tf-card{background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px -14px rgba(30,60,130,.35)}
.tf-sh{display:flex;align-items:baseline;gap:10px}
.tf-sh h2{margin:0;font-size:16px;font-weight:800}
.tf-sh span{color:var(--sub);font-size:12px}
.tf-sh .tf-i{align-self:center;color:#ff7a2f;font-size:18px}

/* 热门组合：自适应网格，每个组合单行 */
.tf-hot{margin-top:10px;padding: 12px 14px 3px;}
.tf-combos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:12px}
.tf-combo{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:inherit;text-decoration:none;transition:border-color .15s,background .15s}
.tf-combo:hover{border-color:var(--ac);background:var(--soft)}
.tf-rk{flex:none;width:18px;height:18px;border-radius:5px;background:var(--chip);color:var(--sub);font-size:11px;font-style:normal;font-weight:700;line-height:18px;text-align:center}
.tf-combo:nth-child(1) .tf-rk{background:#ff5a5f;color:#fff}
.tf-combo:nth-child(2) .tf-rk{background:#ff8a3d;color:#fff}
.tf-combo:nth-child(3) .tf-rk{background:#f5b324;color:#fff}
.tf-ct{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.tf-ct em{font-style:normal}
.tf-ct em+em:before{content:" + ";color:var(--sub)}
.tf-cv{flex:none;font-size:12px;color:#ff7a2f}

/* 主布局 background:color-mix(in srgb,var(--gc) 14%,transparent) */
.tf-main{display:grid;grid-template-columns:268px minmax(0,1fr);gap:14px;margin-top:14px;align-items:start}
.tf-side{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;padding:14px 14px 6px}
.tf-side h3{margin:0;font-size:17px;font-weight:800}
.tf-side>p{margin:2px 0 6px;color:var(--sub);font-size:12px}
.tf-g{padding:11px 0;border-top:1px solid var(--line)}
.tf-g[hidden]{display:none}
.tf-gh{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.tf-g{--gc:#f2b01e}
.tf-g:nth-of-type(5n+2){--gc:#8b5cf6}
.tf-g:nth-of-type(5n+3){--gc:#3b82f6}
.tf-g:nth-of-type(5n+4){--gc:#ef4444}
.tf-g:nth-of-type(5n){--gc:#06b6d4}
.tf-gh .tf-i{width:35px;height:35px;padding:6px;border-radius:9px;color:var(--gc);}

.tf-gh small{margin-left:auto;color:var(--sub);font-size:12px;font-weight:400}
.tf-tl{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:4px;margin-top:8px}
.tf-tags{display:flex;flex-wrap:wrap;gap:5px;max-height:56px;overflow:hidden}
.tf-g.open .tf-tags,.tf.searching .tf-tags{max-height:none}
.tf-pill{height:24px;padding:0 8px;border:0;border-radius:6px;background:var(--chip);color:var(--sub);font-size:12px;cursor:pointer;transition:.15s}
.tf-pill:hover{background:var(--soft);color:var(--ac)}
.tf-pill.active{background:var(--bgt);color:#fff;font-weight:700}
.tf-pill.hide{display:none}
.tf-more{display:none;width:42px;height:24px;border:0;background:none;color:var(--sub);cursor:pointer;font-size:13px;letter-spacing:-1px;line-height:24px;text-align:center}
.tf-more::after{ content: "展开▾";}
.tf-g.can-fold .tf-more{display:block}
.tf-g.open .tf-more{color:var(--sub);transform:rotate(20deg)}
.tf.searching .tf-more{display:none}
.tf-none{display:none;padding:24px 0;text-align:center;color:var(--sub)}
.tf-none.show{display:block}
.tf-filter-toggle{display:none}

/* 右侧：检索 + 已选 */
.tf-col{display:grid;gap:14px;min-width:0}
.tf-pick{padding:14px 16px}
.tf-r1{display:flex;gap:10px}
.tf-search{position:relative;flex:1}
.tf-search .tf-i{position:absolute;left:12px;top:10px;color:var(--sub);font-size:12px}
.tf-search input{width:100%;height:36px;padding:0 12px 0 36px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--txt);font-size:14px}
.tf-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ac);font-size:13px;white-space:nowrap;cursor:pointer;text-decoration:none}
.tf-btn:hover{border-color:var(--ac);color:var(--ac)}
.tf-btn.pri{background:var(--bac);border-color:var(--ac);color:#fff;font-weight:700;padding:0 22px}
.tf-btn.pri:hover{filter:brightness(1.1);color:#fff}
.tf-btn.sq{width:40px;padding:0;border-radius:50%}
.tf-lb{display:flex;align-items:center;gap:6px;margin:12px 0 8px;font-weight:700}
.tf-lb .tf-i{color:var(--ac)}
.tf-r2{display:flex;gap:10px}
.tf-sel{flex:1;min-height:44px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 10px;border-radius:10px;background:var(--bg)}
.tf-empty{color:var(--sub);font-size:13px;margin-left: 10px;}
.tf-chip{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 6px 0 10px;border:0;border-radius:6px;background:var(--soft);color:var(--ac);font-size:12.5px;font-weight:600;cursor:pointer}
.tf-chip:after{content:"×";font-size:15px;opacity:.7}
.tf-chip:hover:after{opacity:1}

/* 结果 */
.tf-rh{display:flex;align-items:center;gap:10px;padding:14px 16px 0}
.tf-rh h2{margin:0;font-size:18px;font-weight:800}
.tf-rh span{color:var(--sub);font-size:12px}
.tf-view{margin-left:auto;display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--bg)}
.tf-view button{width:30px;height:28px;border:0;border-radius:6px;background:none;color:var(--sub);cursor:pointer}
.tf-view button.on{background:var(--card);color:var(--ac);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.tf-rs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 16px 0;color:var(--sub);font-size:13px}
.tf-rs a{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:var(--sub);text-decoration:none}
.tf-rs a:hover{color:var(--ac)}
.tf-res{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;padding:14px 16px 16px}
.tf-book{display:grid;grid-template-columns:78px minmax(0,1fr);gap:4px 10px;align-content:start;padding:10px;border:1px solid var(--line);border-radius:12px;color:inherit;text-decoration:none;box-shadow:0 4px 14px -6px rgba(30,60,130,.3);transition:border-color .15s,transform .15s,box-shadow .15s}
.tf-book:hover{border-color:var(--line);transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(30,60,130,.4)}
.tf-book img{grid-row:span 2;width:78px;height:104px;object-fit:cover;border-radius:8px;background:var(--chip);box-shadow:0 6px 14px -4px rgba(20,30,60,.4)}
.tf-bt{font-size:14px;line-height:2;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--sub)}
.tf-bm{color:var(--sub);font-size:12px;line-height:1.6}
.tf-bm span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-bg{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.tf-bg span{padding:0 8px;border-radius:999px;background:var(--tb,#ffe9ee);color:var(--tc,#e0486e);font-size:11.5px;line-height:20px}
.tf-bg span:nth-child(5n+2){--tb:#e3f7ef;--tc:#18946a}
.tf-bg span:nth-child(5n+3){--tb:#fff0e1;--tc:#d9741a}
.tf-bg span:nth-child(5n+4){--tb:#efeafd;--tc:#6b52d6}
.tf-bg span:nth-child(5n+5){--tb:#e6f0ff;--tc:#2a6be0}
html[data-theme=dark] .tf-bg span{background:var(--chip);color:var(--txt)}
.tf-bd{grid-column:1/-1;margin:4px 0 0;color:var(--sub);font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tf-bv{grid-column:1/-1;display:flex;align-items:center;gap:4px;margin-top:6px;color:var(--sub);font-size:12px}
.tf-br{display:flex;align-items:center;gap:4px;margin-left:10px}
.tf-res.list{grid-template-columns:1fr}
.tf-res.list .tf-book{grid-template-columns:78px minmax(0,1fr)}
.tf-res.list .tf-book img{grid-row:span 4}
.tf-res.list .tf-bg,.tf-res.list .tf-bd,.tf-res.list .tf-bv{grid-column:2}
.tf-res.list .tf-bt{-webkit-line-clamp:1;line-clamp:1}
.tf-blank{padding:6px 16px;text-align:center;color:var(--sub);}
.tf-blank .tf-i{display:block;margin:0 auto 8px;font-size:24px;color:var(--ac);opacity:.7}

.tf-toast{position:fixed;left:50%;bottom:28px;z-index:99;padding:9px 16px;border-radius:8px;background:#1b2640;color:#fff;font-size:13px;transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:.2s}
.tf-toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:900px){
  .tf-main{grid-template-columns:1fr}
  .tf-side{position:static;max-height:none}
  .tf-hero{min-height:0;padding:20px 0}.tf-hero h1{font-size:22px}
}
@media(max-width:560px){
  .tf-r2{flex-wrap:wrap}.tf-sel{flex:1 1 100%}.tf-r2 .tf-btn{flex:1}
  .tf-btn.sq{flex:none!important}
  .tf-sh h2 { margin: 0;font-size: 16px;}
}
@media(prefers-reduced-motion:reduce){.tf *{transition:none!important}}

/* 热门组合：默认显示 2 行，可展开 */
.tf-combos:not(.open) .tf-combo:nth-child(n+13){display:none}
.tf-xp{display:block;margin:10px auto 0;padding:5px 16px;border:0;border-radius:999px;background:#fafaff;;color:var(--sub);font-size:12.5px;cursor:pointer;width:100%;font-weight:600;transition:.15s}
html[data-theme=dark] .tf-xp{background:var(--chip);color:var(--txt)}
.tf-xp:hover{filter:brightness(1.08)}
.tf-xp[hidden]{display:none}
.tf-xp:after{content:"展开更多 ▾"}
.tf-combos.open+.tf-xp:after{content:"收起 ▴"}
@media(max-width:720px){
  .tf-combos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tf-combos:not(.open) .tf-combo:nth-child(n+5){display:none}
  .tf-cv{display:none}
}

/* 已筛选后的移动端优先展示小说结果，筛选项可按需展开 */
@media(max-width:720px){
  .tf.has-selection .tf-side .tf-g{display:none}
  .tf.has-selection .tf-side.filters-open .tf-g:not([hidden]){display:block}
  .tf-filter-toggle{display:none}
  .tf.has-selection .tf-filter-toggle{display:block;margin:5px 0 5px auto;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ac);font:inherit;font-size:13px;cursor:pointer}
  .tf.has-selection .tf-ht-list{flex:1 1 100%;max-height:36px;overflow:hidden}
  .tf.has-selection .tf-ht.open .tf-ht-list{max-height:none}
  .tf-ht-more{flex:1 1 100%;padding:2px 0;border:0;background:none;color:var(--ac);font:inherit;font-size:12px;text-align:right;cursor:pointer}
  .tf-ht-more[hidden]{display:none}
}

.tag-guide-container {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      color: #2d3748;
      line-height: 1.6;
      padding: 20px;
  }
  .tag-guide-container h2 {
      border-bottom: 2px solid #4a5568;
      padding-bottom: 8px;
      color: #1a202c;
      font-size: 22px;
      margin-bottom: 20px;
  }
  .tag-section {
      margin-bottom: 12px;
      background: #f7fafc;
      padding: 16px;
      border-radius: 0 8px 8px 0;
  }
  .tag-section.plot { border-left: 4px solid #3182ce; }
  .tag-section.world { border-left: 4px solid #38a169; }
  .tag-section.character { border-left: 4px solid #d69e2e; }
  .tag-section.emotion { border-left: 4px solid #e53e3e; }

  .tag-section h3 {
      margin: 0 0 10px 0;
      font-size: 16px;
  }
  .tag-section.plot h3 { color: #2b6cb0; }
  .tag-section.world h3 { color: #2f855a; }
  .tag-section.character h3 { color: #b7791f; }
  .tag-section.emotion h3 { color: #c53030; }

  .tag-section ul {
      margin: 0;
      padding-left: 20px;
      font-size: 14px;
  }
  .tag-section li {
      margin-bottom: 6px;
  }
html[data-theme=dark] .tag-guide-container{color:var(--txt)}
html[data-theme=dark] .tag-guide-container h2{border-bottom-color:var(--line);color:var(--txt)}
html[data-theme=dark] .tag-section{background:#1b2438}