/* ======================================================================
   话题标签组合生成器 · 独立设计（社媒气泡 / 极光渐变主题）
   浅色 = 白净卡片 + 靛紫极光；深色 = 深夜极光
   ====================================================================== */
.hcg{
  --ink:#211d3a; --sub:#635f85; --faint:#9b97bd;
  --bg:#f5f4fb; --card:#ffffff; --card2:#efedf9; --line:#e2dff2; --line2:#eceaf7;
  --pri:#6d28d9; --pri-2:#8b5cf6; --pri-soft:#f1eafc; --pri-ink:#5b21b6;
  --acc:#db2777; --acc-soft:#fdeef5;
  --ok:#047857; --ok-soft:#e4f5ee; --err:#be123c; --err-soft:#fdeaef;
  --r:14px;
  --shadow:0 1px 2px rgba(33,29,58,.05),0 12px 30px rgba(33,29,58,.09);
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px;line-height:1.75;
  background:
    radial-gradient(640px 300px at 12% -110px, rgba(109,40,217,.12), transparent 62%),
    radial-gradient(560px 280px at 88% -90px, rgba(219,39,119,.10), transparent 62%),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .hcg{
  --ink:#eceafa; --sub:#a5a1c7; --faint:#6f6b93;
  --bg:#100f1c; --card:#1a1830; --card2:#221f3d; --line:#332f55; --line2:#2a2748;
  --pri:#a78bfa; --pri-2:#c4b5fd; --pri-soft:rgba(167,139,250,.14); --pri-ink:#ddd6fe;
  --acc:#f472b6; --acc-soft:rgba(244,114,182,.12);
  --ok:#34d399; --ok-soft:rgba(52,211,153,.10); --err:#fb7185; --err-soft:rgba(251,113,133,.12);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.5);
}
.hcg *{box-sizing:border-box;}
.hcg b{font-weight:700;}
.hcg-wrap{max-width:1080px;margin:0 auto;}

.hcg-hero{margin-top:22px;background:linear-gradient(120deg,var(--pri),#4338ca 45%,var(--acc));border-radius:18px;padding:26px 28px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.hcg-hero::before{content:"#";position:absolute;right:24px;top:-30px;font-size:150px;font-weight:900;color:rgba(255,255,255,.12);}
.hcg-hero h1{margin:0 0 6px;font-size:clamp(23px,3.4vw,31px);font-weight:900;color:#fff;}
.hcg-hero p{margin:0;color:rgba(255,255,255,.85);font-size:14.5px;max-width:760px;}
.hcg-hero p em{font-style:normal;color:#fff;font-weight:800;}
.hcg-float{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.hcg-float span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px;padding:4px 13px;font-size:12.5px;font-weight:700;backdrop-filter:blur(4px);}

.hcg-desk{display:grid;grid-template-columns:420px 1fr;gap:16px;margin-top:18px;}
@media (max-width:940px){.hcg-desk{grid-template-columns:1fr;}}
.hcg-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;}
.hcg-card h2{margin:0 0 10px;font-size:15.5px;font-weight:900;display:flex;align-items:center;gap:8px;}
.hcg-card h2::before{content:"#";color:var(--acc);font-weight:900;}
.hcg-lb{font-size:12.8px;color:var(--sub);font-weight:700;margin:12px 0 6px;}
.hcg-lb:first-of-type{margin-top:0;}
.hcg-chips{display:flex;flex-wrap:wrap;gap:7px;}
.hcg-chip{border:1px solid var(--line);background:var(--card2);color:var(--sub);border-radius:999px;padding:5px 14px;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;font-family:inherit;}
.hcg-chip:hover{border-color:var(--pri-2);color:var(--pri-ink);}
.hcg-chip.on{background:var(--pri);border-color:var(--pri);color:#fff;}
:root[data-theme="dark"] .hcg-chip.on{color:#1c1035;}
.hcg-chip.on2{background:var(--acc);border-color:var(--acc);color:#fff;}
.hcg-in{width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:14.5px;outline:none;font-family:inherit;}
.hcg-in:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.hcg-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center;}
.hcg-btn{border:none;border-radius:10px;padding:9px 20px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s;}
.hcg-btn-go{background:linear-gradient(100deg,var(--pri),var(--acc));color:#fff;}
.hcg-btn-go:hover{filter:brightness(1.08);}
.hcg-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1px solid var(--line);}
.hcg-btn-ghost:hover{border-color:var(--pri-2);}
.hcg-msg{margin-top:10px;font-size:13px;min-height:20px;font-weight:700;}
.hcg-msg.err{color:var(--err);}
.hcg-msg.ok{color:var(--ok);}

.hcg-out{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:15px;line-height:2.1;min-height:74px;word-break:break-all;}
.hcg-out .hcg-tg{font-weight:800;}
.hcg-out .hcg-tg.hot{color:var(--pri);}
.hcg-out .hcg-tg.vt{color:var(--acc);}
.hcg-out .hcg-tg.lt{color:var(--ok);}
:root[data-theme="dark"] .hcg-out .hcg-tg.hot{color:var(--pri-2);}
.hcg-rules{margin-top:12px;display:flex;flex-direction:column;gap:7px;}
.hcg-rule{display:flex;gap:10px;align-items:baseline;font-size:13.2px;color:var(--sub);border:1px solid var(--line2);border-radius:10px;padding:8px 12px;background:var(--card);}
.hcg-rule i{font-style:normal;flex:0 0 auto;font-size:11px;font-weight:900;border-radius:6px;padding:1px 8px;color:#fff;}
.hcg-rule i.hot{background:var(--pri);}
.hcg-rule i.vt{background:var(--acc);}
.hcg-rule i.lt{background:var(--ok);}
.hcg-rule b{color:var(--ink);}
.hcg-empty{color:var(--faint);font-size:14px;text-align:center;padding:34px 0;}
.hcg-count{margin-top:10px;font-size:12.8px;color:var(--sub);}
.hcg-count b{color:var(--pri-ink);}

.hcg-faq{margin-top:32px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);}
.hcg-faq h2{margin:0 0 10px;font-size:19px;font-weight:900;}
.hcg-faq h3{margin:18px 0 4px;font-size:15.5px;font-weight:800;color:var(--pri-ink);}
.hcg-faq p{margin:0;color:var(--sub);font-size:14px;}
.hcg-faq p b{color:var(--ink);}

/* ===== ③ 场景模板与结构分析 ===== */
.hcgx-panel{margin-top:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;}
.hcgx-head h2{margin:0 0 6px;font-size:17px;font-weight:900;color:var(--ink);}
.hcgx-head p{margin:0 0 16px;font-size:13.5px;color:var(--sub);line-height:1.7;}
.hcgx-tpl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;}
.hcgx-tpl-btn{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--card2);border-radius:10px;padding:9px 12px;cursor:pointer;font-family:inherit;transition:all .15s;overflow:hidden;}
.hcgx-tpl-btn:hover{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.hcgx-tpl-btn b{font-size:13.5px;font-weight:800;color:var(--ink);white-space:nowrap;}
.hcgx-tpl-btn span{font-size:11.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.hcgx-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;}
.hcgx-card{border:1px solid var(--line2);background:var(--card2);border-radius:12px;padding:15px 17px;min-width:0;}
.hcgx-card h3{margin:0 0 10px;font-size:14px;font-weight:900;color:var(--ink);}
.hcgx-chart{width:100%;overflow-x:auto;}
.hcgx-chart svg{display:block;width:100%;min-width:220px;height:auto;max-height:230px;}
.hcgx-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:6px;}
.hcgx-lg{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--sub);}
.hcgx-lg i{width:10px;height:10px;border-radius:3px;flex:0 0 auto;}
.hcgx-lg b{color:var(--ink);font-weight:800;}
.hcgx-note{margin:0 0 12px;font-size:12.8px;color:var(--sub);line-height:1.7;}
.hcgx-actions{display:flex;flex-wrap:wrap;gap:8px;}
.hcgx-btn{border:1px solid var(--line);background:var(--card);color:var(--pri-ink);border-radius:9px;padding:8px 14px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s;}
.hcgx-btn:hover{border-color:var(--pri-2);background:var(--pri-soft);}
.hcgx-msg{margin-top:10px;font-size:12.8px;font-weight:700;min-height:18px;color:var(--sub);}
.hcgx-msg.err{color:var(--err);}
.hcgx-msg.ok{color:var(--ok);}

@media (max-width:760px){
  .hcgx-panel{padding:18px 16px;}
  .hcgx-tpl{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hcgx-grid{grid-template-columns:1fr;}
  .hcgx-chart svg{min-width:180px;}
}