@charset "utf-8";
/* ============================================================
   365建站器软件站 · 首页"四大核心工具"卡片 + AI 模拟演示弹层专用样式
   自 axskin home_tool.css 移植（仅保留卡片区与 th-ai- 及 th-sim- 弹层所需），
   类名前缀 th- ，仅由 softskin index_article.htm 引入
   ============================================================ */

:root{
    --th-navy:#032b17;
    --th-navy2:#064a2a;
    --th-blue:#2aae67;
    --th-violet:#06AD56;
    --th-cyan:#7dedb6;
    --th-ink:#101828;
    --th-sub:#5b6472;
    --th-line:#e8ecf3;
    --th-bg:#f6f8fc;
    --th-ok:#12b886;
    --th-warn:#f59e0b;
    --th-bad:#f4587c;
    --th-radius:18px;
    --th-shadow:0 12px 40px rgba(16,24,40,.08);
    --th-font:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}

#tools.th-sec *{box-sizing:border-box;}

/* ---------- 通用 Section ---------- */
.th-sec{padding:56px 0 20px;font-family:var(--th-font);}
.th-wrap{position:relative;z-index:2;width:1200px;max-width:94%;margin:0 auto;}
.th-sec-head{text-align:center;max-width:760px;margin:0 auto 44px;}
.th-eyebrow{display:inline-block;padding:6px 16px;border-radius:999px;background:rgba(6,173,86,.08);color:var(--th-blue);font-size:13px;font-weight:700;letter-spacing:2px;}
.th-sec-head h2{margin:18px 0 0;color:var(--th-ink);font-size:34px;font-weight:800;letter-spacing:.5px;}
.th-sec-head p{margin:16px 0 0;color:var(--th-sub);font-size:16px;line-height:1.9;}

/* 工具卡片 */
.th-grid4{display:flex;gap:22px;flex-wrap:wrap;}
.th-card{
    flex:1;min-width:250px;display:flex;flex-direction:column;
    padding:34px 28px;border-radius:var(--th-radius);
    background:#fff;border:1px solid var(--th-line);
    box-shadow:var(--th-shadow);
    transition:transform .28s ease, box-shadow .28s ease;
    position:relative;overflow:hidden;
}
.th-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--ac,linear-gradient(90deg,var(--th-blue),var(--th-violet)));opacity:0;transition:opacity .28s;}
.th-card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(16,24,40,.14);}
.th-card:hover::before{opacity:1;}
.th-card .th-ico{
    width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
    background:var(--acbg,rgba(6,173,86,.10));color:var(--acclr,var(--th-blue));margin-bottom:22px;
}
.th-card .th-ico svg{width:26px;height:26px;}
.th-card h3{margin:0 0 12px;color:var(--th-ink);font-size:20px;font-weight:700;}
.th-card h3 small{margin-left:8px;padding:2px 8px;border-radius:6px;background:var(--acbg,rgba(6,173,86,.10));color:var(--acclr,var(--th-blue));font-size:11px;font-weight:800;letter-spacing:1px;vertical-align:3px;}
.th-card > p{margin:0 0 18px;color:var(--th-sub);font-size:14px;line-height:1.85;}
.th-card ul{margin:auto 0 0;padding:0;list-style:none;}
.th-card li{position:relative;padding:7px 0 7px 24px;margin:0;line-height:normal;color:#3d4457;font-size:13.5px;list-style:none;white-space:normal;}
.th-card li::before{
    content:"";position:absolute;left:2px;top:12px;width:12px;height:7px;
    border-left:2px solid var(--th-ok);border-bottom:2px solid var(--th-ok);transform:rotate(-45deg);
}
.th-card .th-more{
    margin-top:22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    align-self:center;padding:11px 28px;border-radius:999px;
    background:var(--ac,var(--th-blue));color:#fff;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.14);transition:transform .2s,box-shadow .2s,opacity .2s;
}
.th-card .th-more svg{width:15px;height:15px;transition:transform .2s;}
.th-card .th-more:hover{opacity:.94;transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.18);}
.th-card .th-more:hover svg{transform:translateX(4px);}

/* ---------- 演示触发锚点表单（不可见，仅供 home_tool.js 复用面板提交按钮弹演示层） ---------- */
#thDemoForms{position:absolute;left:-9999px;top:0;width:900px;height:0;overflow:hidden;}
#thDemoForms .th-panel{display:block;}
.th-search{
    display:flex;align-items:center;gap:10px;
    height:72px;padding:8px 8px 8px 26px;
    background:#fff;border-radius:18px;
}
.th-search svg.th-ico{width:22px;height:22px;flex:none;color:#98a2b3;}
.th-search input{
    flex:1;min-width:0;height:52px;border:0;outline:none;background:transparent;
    font-size:17px;color:var(--th-ink);font-family:var(--th-font);
}
.th-btn-go{
    flex:none;height:45px;padding:0 34px;border:0;border-radius:13px;cursor:pointer;
    background:linear-gradient(92deg,var(--th-blue),var(--th-violet));
    color:#fff;font-size:17px;font-weight:700;letter-spacing:2px;font-family:var(--th-font);
}
.th-geoform{
    display:flex;flex-direction:column;gap:14px;
    padding:20px 22px;border-radius:18px;background:#fff;
}
.th-geo-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;}
.th-geo-field{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px;}
.th-geo-field span{font-size:12px;font-weight:700;color:#6b7385;letter-spacing:1px;}
.th-geo-field input{
    width:100%;height:50px;box-sizing:border-box;padding:0 16px;
    border:1.5px solid #e3e8f0;border-radius:12px;outline:none;background:#fff;
    font-size:15px;color:var(--th-ink);font-family:var(--th-font);
}
.th-geo-plats{display:block;}
.th-geo-platsline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.th-geo-platsline > b{font-size:12px;font-weight:700;color:#6b7385;letter-spacing:1px;flex:none;}
.th-geo-plats .th-plats{flex:1 1 300px;}
.th-geo-plats .th-btn-go{margin-left:auto;margin-top:0;}
.th-plats{display:flex;gap:8px;flex-wrap:wrap;flex:1;margin-bottom:14px;}
.th-plat{
    position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
    padding:9px 12px;border-radius:11px;border:1.5px solid #e3e8f0;background:#fff;
    font-size:13.5px;font-weight:600;color:#3c4454;
}
.th-plat input{position:absolute;opacity:0;width:0;height:0;}
.th-plat-st{width:7px;height:7px;border-radius:50%;background:#c9d0dc;flex:none;}
.th-geoform .th-btn-go{height:50px;flex:none;}

/* ---------- 响应式 ---------- */
@media only screen and (max-width:1024px){
    .th-sec{padding:44px 0 16px;}
    .th-sec-head h2{font-size:28px;}
}
@media only screen and (max-width:768px){
    .th-search{height:auto;flex-wrap:wrap;padding:12px;border-radius:16px;}
    .th-search input{width:100%;height:44px;padding:0 10px;}
    .th-btn-go{width:100%;height:50px;}
}

/* ============================================================
   AI 模拟演示弹层（layer.open type:1 内容，th-ai- 前缀）
   ============================================================ */
.th-ai{display:flex;flex-direction:column;width:100%;height:100%;background:#fff;border-radius:16px;overflow:hidden;font-family:var(--th-font);}
.th-ai-hd{flex:none;display:flex;align-items:center;gap:10px;padding:14px 20px;background:linear-gradient(120deg,var(--th-navy),var(--th-navy2) 55%,#0c7a44);color:#fff;}
.th-ai-logo{width:28px;height:28px;border-radius:9px;background:linear-gradient(92deg,var(--th-blue),var(--th-violet));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(6,173,86,.4);}
.th-ai-logo svg{width:16px;height:16px;}
.th-ai-hd b{font-size:15px;font-weight:700;}
.th-ai-live{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--th-cyan);border:1px solid rgba(125,237,182,.4);border-radius:999px;padding:3px 10px;}
.th-ai-bd{flex:1;overflow-y:auto;padding:22px 24px 8px;}
.th-ai-q{display:flex;justify-content:flex-end;margin-bottom:18px;}
.th-ai-q span{max-width:82%;padding:10px 16px;border-radius:14px 14px 4px 14px;background:linear-gradient(92deg,var(--th-blue),var(--th-violet));color:#fff;font-size:13.5px;line-height:1.7;box-shadow:0 8px 20px rgba(6,173,86,.22);}
.th-ai-step{display:flex;margin:0 0 14px;opacity:0;transform:translateY(10px);transition:all .4s ease;}
.th-ai-step.on{opacity:1;transform:none;}
.th-ai-rail{flex:none;width:26px;display:flex;flex-direction:column;align-items:center;}
.th-ai-ic{width:26px;height:26px;border-radius:50%;background:#eef2f7;color:#8b95a6;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none;transition:all .3s ease;margin-top:10px;}
.th-ai-ic svg{width:14px;height:14px;}
.th-ai-ic.run{background:#e6f7ef;color:var(--th-violet);animation:th-ai-blink 1.1s ease-in-out infinite;}
.th-ai-ic.done{background:var(--th-ok);color:#fff;}
@keyframes th-ai-blink{0%,100%{box-shadow:0 0 0 0 rgba(6,173,86,.35)}50%{box-shadow:0 0 0 7px rgba(6,173,86,0)}}
.th-ai-line{flex:1;width:2px;margin:6px auto 0;background:var(--th-line);}
.th-ai-step:last-child .th-ai-line{display:none;}
.th-ai-main{flex:1;margin-left:12px;min-width:0;}
.th-ai-card{border:1px solid var(--th-line);border-radius:12px;background:#fafbfd;overflow:hidden;margin:0 10px;}
.th-ai-card-hd{display:flex;align-items:center;gap:8px;padding:11px 14px;font-size:13px;font-weight:600;color:var(--th-ink);cursor:default;}
.th-ai-click{cursor:pointer;}
.th-ai-time{margin-left:auto;font-size:12px;font-weight:400;color:var(--th-sub);}
.th-ai-time i{font-style:normal;color:var(--th-violet);font-weight:700;}
.th-ai-arrow{width:9px;height:9px;border-right:2px solid #b6bfcc;border-bottom:2px solid #b6bfcc;transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease;flex:none;}
.th-ai-card.open .th-ai-arrow{transform:rotate(-135deg);}
.th-ai-card-bd{display:none;padding:2px 14px 12px;font-size:12.5px;color:var(--th-sub);line-height:1.9;}
.th-ai-card.open .th-ai-card-bd{display:block;}
.th-ai-caret{display:inline-block;width:6px;height:13px;margin-left:2px;vertical-align:-2px;background:var(--th-violet);animation:th-ai-caret 1s steps(2) infinite;}
@keyframes th-ai-caret{0%,100%{opacity:1}50%{opacity:0}}
.th-ai-tool{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:var(--th-violet);background:#e6f7ef;border-radius:6px;padding:2px 8px;}
.th-ai-prog{height:6px;margin:8px 0 6px;border-radius:999px;background:#eef2f7;overflow:hidden;}
.th-ai-prog i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(92deg,var(--th-blue),var(--th-violet));transition:width .3s ease;}
.th-ai-pct{font-size:11.5px;color:var(--th-sub);}
.th-ai-done{display:flex;align-items:flex-start;gap:9px;padding:12px 14px;border-radius:12px;background:#e9f9f1;border:1px solid #bfe9d2;color:#0b6b3a;font-size:13.5px;font-weight:600;line-height:1.6;}
.th-ai-done .th-ai-ic{width:20px;height:20px;font-size:11px;margin-top:1px;flex:none;}
.th-ai-result{margin-top:14px;border:1px solid var(--th-line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 10px 28px rgba(16,24,40,.07);}
.th-ai-site{display:flex;align-items:center;gap:14px;padding:16px;background:linear-gradient(135deg,#f2fbf6,#e8f7ef);border-bottom:1px solid var(--th-line);}
.th-ai-fav{width:46px;height:46px;border-radius:13px;background:linear-gradient(120deg,var(--th-blue),var(--th-violet));color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;box-shadow:0 8px 18px rgba(6,173,86,.28);flex:none;}
.th-ai-site b{display:block;font-size:15.5px;color:var(--th-ink);}
.th-ai-site b i{font-style:normal;font-size:11px;font-weight:700;color:var(--th-violet);background:#d9f3e5;border-radius:6px;padding:2px 7px;margin-left:8px;vertical-align:1px;}
.th-ai-site em{display:block;font-style:normal;margin-top:4px;font-size:12.5px;color:var(--th-ok);}
.th-ai-ft{flex:none;display:flex;align-items:center;gap:14px;padding:14px 24px;border-top:1px solid var(--th-line);background:#fff;}
.th-ai-tip{font-size:12px;color:#98a2b3;}
@media only screen and (max-width:640px){
    .th-ai-bd{padding:16px 14px 4px;}
    .th-ai-ft{flex-direction:column;align-items:stretch;}
}

/* ============================================================
   SEO / GEO / 社媒模拟弹层：报告卡（th-sim- 前缀，配合 th-ai-* 骨架）
   ============================================================ */
.th-sim-rp-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px 12px;border-bottom:1px solid var(--th-line);}
.th-sim-rp-hd b{font-size:16px;color:var(--th-ink);}
.th-sim-rp-hd time{color:#98a2b3;font-size:12px;}
.th-sim-tags{margin-left:auto;display:flex;gap:6px;}
.th-sim-tags i{font-style:normal;font-size:11.5px;font-weight:700;border-radius:6px;padding:3px 9px;}
.th-sim-tags i.blue{background:#eaf1ff;color:#3878e8;}
.th-sim-tags i.green{background:#e9f9f1;color:var(--th-ok);}
.th-sim-hero{display:flex;align-items:center;gap:22px;padding:16px;background:linear-gradient(135deg,#f2fbf6,#f9fdf7);border-bottom:1px solid var(--th-line);}
.th-sim-score{flex:none;text-align:center;padding:0 18px 0 6px;border-right:1px dashed #d4e5da;}
.th-sim-score b{font-size:42px;font-weight:800;color:var(--th-ok);line-height:1;}
.th-sim-score span{font-size:14px;color:#98a2b3;}
.th-sim-score em{display:block;margin-top:6px;font-style:normal;font-size:11.5px;color:var(--th-sub);}
.th-sim-sum{flex:1;min-width:0;}
.th-sim-sum .l1{margin:0 0 8px;display:flex;gap:8px;}
.th-sim-sum .badge{font-style:normal;font-size:12px;font-weight:700;border-radius:6px;padding:3px 10px;}
.th-sim-sum .badge.g{background:#dff5e9;color:#0b8a5f;}
.th-sim-sum .badge.r{background:#fde8ee;color:var(--th-bad);}
.th-sim-sum .l2{margin:0;font-size:13px;color:var(--th-ink);}
.th-sim-cats-h{display:flex;align-items:center;gap:10px;padding:14px 2px 10px;font-size:14px;margin:0 10px;font-weight:800;color:var(--th-ink);}
.th-sim-cats-h span{font-size:12px;font-weight:400;color:#98a2b3;}
.th-sim-cat{cursor:pointer;align-items:center;}
.th-sim-cat b{font-size:13.5px;font-weight:600;}
.th-sim-cat .sc{margin-left:auto;font-style:normal;font-size:13px;font-weight:800;color:var(--th-ok);}
.th-sim-caret{flex:none;width:0;height:0;border-left:7px solid #b6bfcc;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;transition:transform .2s ease;}
.th-ai-card.open .th-sim-caret{transform:rotate(90deg);}
.th-sim-pill{font-size:11.5px;font-weight:700;border-radius:6px;padding:3px 9px;flex:none;}
.th-sim-pill.ok{background:#e6f7ef;color:#0b8a5f;}
.th-sim-pill.warn{background:#fff5e6;color:#c07d12;}
.th-sim-pill.bad{background:#fdecef;color:var(--th-bad);}
.th-sim-it{padding:8px 0;border-top:1px dashed var(--th-line);}
.th-sim-it:first-child{border-top:0;}
.th-sim-it b{display:block;font-size:12.5px;color:var(--th-ink);margin-bottom:2px;}
.th-sim-it span{display:block;font-size:12px;color:var(--th-sub);line-height:1.7;}
.th-sim-it em.sug{display:block;margin-top:5px;font-style:normal;font-size:12px;line-height:1.7;color:#8a5a12;background:#fff6e4;border:1px solid #f5e2b8;border-radius:8px;padding:5px 9px;}
.th-sim-it.fail b::before{content:"!";display:inline-flex;width:15px;height:15px;border-radius:50%;background:var(--th-bad);color:#fff;font-size:10px;font-weight:800;align-items:center;justify-content:center;margin-right:6px;}
.th-sim-it.warn b::before{content:"!";display:inline-flex;width:15px;height:15px;border-radius:50%;background:var(--th-warn);color:#fff;font-size:10px;font-weight:800;align-items:center;justify-content:center;margin-right:6px;}

/* GEO 检测模拟结果卡：各平台回答 */
.th-geo-brands{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 8px;}
.th-geo-brand{position:relative;display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;background:#f4f6fa;color:#3c4454;font-size:12.5px;font-weight:600;}
.th-geo-brand i{margin-left:6px;font-style:normal;font-size:11px;font-weight:800;color:#8b93a3;}
.th-geo-brand.me{background:rgba(6,173,86,.1);color:#0b7a43;outline:1.5px solid rgba(6,173,86,.35);}
.th-geo-brand.me i{color:#06AD56;}
.th-geo-ans{color:#5b6472;font-size:12.5px;line-height:1.8;padding:9px 12px;border-radius:10px;background:#f7f9fc;}
.th-geo-msg{color:#c07d12;font-size:12px;line-height:1.7;margin-top:6px;}