/* The real five-category template catalog, with direct links to all 60 tools. */
.fh-sop { --template-accent:#c1664e; --template-wash:#fdf3ef; grid-column:span 6; padding:18px 22px 0; display:flex; flex-direction:column; background:#fff; box-shadow:inset 0 0 0 1px #e6eaf4,0 5px 18px -12px #24426838; }
.fh-sop[data-fh-current="xiaohongshu"] { --template-accent:#c25777; --template-wash:#fcf0f5; }
.fh-sop[data-fh-current="wechat-video"] { --template-accent:#398574; --template-wash:#eff8f4; }
.fh-sop[data-fh-current="douyin"] { --template-accent:#387eaa; --template-wash:#eff6fb; }
.fh-sop[data-fh-current="live"] { --template-accent:#b18133; --template-wash:#fcf6ea; }
.fh-sop .fh-heading h2 { color:#18243b; }
.fh-sop .fh-heading p { margin-top:6px; color:#79849a; font-size:12px; }
.fh-template-mark { position:relative; display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; border-radius:11px; color:#4569d2; background:#edf3ff; box-shadow:inset 0 0 0 1px #dfe8fb; }
.fh-template-mark>svg { width:23px; height:23px; }
.fh-template-mark i { position:absolute; bottom:-3px; right:-6px; border:2px solid #fff; border-radius:5px; padding:1px 3px; color:#fff; background:#5368de; font-size:8px; line-height:1.4; font-style:normal; font-weight:700; }
.fh-template-workspace { margin-top:14px; flex:1; }
.fh-template-tabs { display:flex; gap:3px; padding:3px; border-radius:9px; background:#f3f5f8; }
.fh-template-tabs button { position:relative; display:flex; flex:1; gap:5px; align-items:center; justify-content:center; min-height:40px; border:0; padding:0 4px; border-radius:6px; background:transparent; color:#7c8493; font-size:12px; font-weight:550; white-space:nowrap; }
.fh-template-tabs button>svg { width:15px; height:15px; }
.fh-template-tabs button small { color:#99a0ac; font-size:10px; font-variant-numeric:tabular-nums; }
.fh-template-tabs button[aria-selected="true"] { color:var(--template-accent); background:#fff; box-shadow:0 2px 6px #243a5910; }
.fh-template-tabs button[aria-selected="true"] small { color:var(--template-accent); }
.fh-template-tabs button:hover { color:var(--template-accent); background:#ffffffb8; }
.fh-template-summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:28px; color:#8a93a3; font-size:10px; }
.fh-template-summary>span:last-child { color:var(--template-accent); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fh-template-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:52px; gap:6px 10px; }
.fh-template-item { display:flex; align-items:center; gap:8px; min-width:0; padding:6px 9px; border-radius:7px; background:linear-gradient(105deg,var(--template-wash),#fff 80%); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--template-accent) 12%,#fff); }
.fh-template-item-icon { display:grid; place-items:center; flex:0 0 24px; width:24px; height:28px; color:var(--template-accent); }
.fh-template-item-icon svg { width:21px; height:21px; stroke-width:1.5; }
.fh-template-item-copy { display:flex; flex:1; flex-direction:column; min-width:0; gap:4px; }
.fh-template-item-copy strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal; text-wrap:pretty; color:#344159; font-size:12px; line-height:1.2; font-weight:550; }
.fh-template-item-copy small { display:flex; gap:9px; color:#8c94a2; font-size:9px; line-height:1.3; white-space:nowrap; }
.fh-template-ai { display:inline-flex; align-items:center; gap:2px; color:var(--template-accent); }
.fh-template-ai svg { width:11px; height:11px; }
.fh-template-item>.zmt-fh-arrow { margin:0; color:#a8b0bd; flex-shrink:0; }
.fh-template-item>.zmt-fh-arrow svg { width:14px; height:14px; }
.fh-template-item:hover { background:var(--template-wash); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--template-accent) 34%,#fff),0 3px 9px #203d5810; }
.fh-template-item:hover strong,.fh-template-item:hover>.zmt-fh-arrow { color:var(--template-accent); }
.fh-sop footer { min-height:44px; margin:12px -22px 0; padding:0 22px; border-top:1px solid #edf0f4; }
.fh-sop footer a { color:#455570; font-size:11px; white-space:nowrap; }
.fh-template-features { display:inline-flex; align-items:center; gap:5px; color:#8390a5; font-size:10px; white-space:nowrap; }
.fh-template-features>svg { width:13px; height:13px; }