@charset "utf-8";
/* ============================================================
   AI 建站模拟演示弹层（layer.open type:1 内容，th-ai- 前缀）
   自包含样式：供 banner_mb.htm（模板列表/详情页）引入，
   与首页 home_tool.css 的 th-ai-* 弹层样式保持一致。
   ============================================================ */

: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-bad:#f4587c;
    --th-font:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}

.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;}
.th-ai-go{margin-left:auto;display:inline-block;padding:11px 26px;border-radius:11px;background:linear-gradient(92deg,var(--th-blue),var(--th-violet));color:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 8px 20px rgba(6,173,86,.25);transition:all .25s ease;}
.th-ai-go:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(6,173,86,.35);}
.th-ai-go.off{background:#dfe4ec;color:#98a2b3;box-shadow:none;cursor:default;pointer-events:none;transform:none;}
@media only screen and (max-width:640px){
    .th-ai-bd{padding:16px 14px 4px;}
    .th-ai-ft{flex-direction:column;align-items:stretch;}
    .th-ai-go{margin-left:0;text-align:center;}
}