/* ============================================================
   众泰云 · 首屏「活工作台」v1（第五十一批）
   ------------------------------------------------------------
   设计转向：不再用"大字 + 静态截图 + 粒子"，而是**把产品做成首屏本体**。
   首屏右侧（窄屏为下方）是一个真实外观的天策工作台：
     · 老板提问逐字打出来
     · 天策回复流式输出
     · 任务清单逐条勾选
     · 底部是真输入框，访客可以自己打字
   意图：访客落地 3 秒内看到的不是"介绍产品的页面"，而是"产品在工作"。

   注意：注释里不得出现任何闭合标签。
   ============================================================ */

html body .hero-live{
  position:relative;width:100%;max-width:min(1180px,96vw);
  margin:clamp(30px,4.6vh,54px) auto 0;
  border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg, rgba(22,27,38,.96), rgba(14,18,26,.99));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    0 -1px 0 rgba(255,255,255,.14) inset,
    0 40px 120px -30px rgba(0,0,0,.9),
    0 0 120px -8px rgba(232,163,61,.30);
  text-align:left;
  font-size:14px;line-height:1.6;
}
html body .hero-live::before{           /* 面板后方的金色泛光 */
  content:"";position:absolute;left:50%;top:-40%;transform:translateX(-50%);
  width:76%;height:80%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side, rgba(232,163,61,.42), transparent 72%);
  filter:blur(64px);
}

/* 顶栏 */
html body .hl-bar{
  position:relative;z-index:1;display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
}
html body .hl-logo{
  width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none;
  font-size:12px;font-weight:800;color:#1A1206;
  background:linear-gradient(145deg,#F0C583,#C77E1F);
}
html body .hl-title{color:#fff;font-weight:600;font-size:13px}
html body .hl-model{
  font-family:var(--font-mono-zt,ui-monospace,monospace);font-size:11px;
  padding:3px 9px;border-radius:999px;color:#F0C583;
  background:rgba(232,163,61,.12);border:1px solid rgba(232,163,61,.24);
}
html body .hl-right{margin-left:auto;display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono-zt,ui-monospace,monospace);font-size:11px;color:rgba(255,255,255,.55)}
html body .hl-live-dot{
  width:6px;height:6px;border-radius:50%;background:#3ddc84;
  box-shadow:0 0 0 4px rgba(61,220,132,.16);animation:hlPulse 2s ease-in-out infinite;
}
@keyframes hlPulse{0%,100%{opacity:1}50%{opacity:.28}}

/* 主体 */
html body .hl-body{position:relative;z-index:1;padding:20px 22px 18px;display:flex;flex-direction:column;gap:14px;min-height:326px}
html body .hl-msg{display:flex;gap:11px;align-items:flex-start}
html body .hl-av{
  width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:700;
}
html body .hl-user .hl-av{background:rgba(255,255,255,.09);color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.14)}
html body .hl-ai .hl-av{background:linear-gradient(145deg,#F0C583,#C77E1F);color:#1A1206}
html body .hl-bubble{
  flex:1;min-width:0;border-radius:12px;padding:11px 14px;font-size:13.5px;
  color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
}
html body .hl-ai .hl-bubble{background:rgba(232,163,61,.055);border-color:rgba(232,163,61,.18)}
html body .hl-caret{
  display:inline-block;width:2px;height:1.02em;background:#E8A33D;vertical-align:-.16em;
  margin-left:2px;animation:hlBlink 1s steps(1) infinite;
}
@keyframes hlBlink{50%{opacity:0}}

/* 任务清单 */
html body .hl-tasks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
html body .hl-task{
  display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;
  font-size:12.5px;color:rgba(255,255,255,.48);
  background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.07);
  transition:color .35s, border-color .35s, background .35s;
}
html body .hl-task .hl-tick{
  width:16px;height:16px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:10px;border:1px solid rgba(255,255,255,.20);color:transparent;
  transition:all .35s;
}
html body .hl-task.on{color:#fff;background:rgba(61,220,132,.07);border-color:rgba(61,220,132,.26)}
html body .hl-task.on .hl-tick{background:#3ddc84;border-color:#3ddc84;color:#06240F}

/* 真输入框 */
html body .hl-input{display:flex;gap:9px;margin-top:2px}
html body .hl-input input{
  flex:1;min-width:0;height:46px;padding:0 16px;border-radius:12px;
  font-size:13.5px;color:#fff;
  background:rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.13);
  outline:none;transition:border-color .2s, box-shadow .2s;
  font-family:inherit;
}
html body .hl-input input::placeholder{color:rgba(255,255,255,.34)}
html body .hl-input input:focus{border-color:rgba(232,163,61,.55);box-shadow:0 0 0 3px rgba(232,163,61,.14)}
html body .hl-input button{
  height:46px;padding:0 24px;border-radius:12px;border:0;cursor:pointer;
  font-size:14px;font-weight:600;color:#1A1206;
  background:linear-gradient(145deg,#F0C583,#E8A33D 45%,#C77E1F);
  box-shadow:0 6px 20px rgba(232,163,61,.30);
  transition:transform .2s cubic-bezier(.34,1.45,.64,1), box-shadow .2s;
}
html body .hl-input button:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(232,163,61,.42)}

/* 首屏文案区收窄，给工作台让位 */
html body .hero .hero-sub{max-width:560px !important}
html body .hero h1{font-size:clamp(38px,5.4vw,86px) !important}

/* 旧的静态截图区不再使用 */
html body .hero-shot{display:none !important}

@media (max-width:860px){
  html body .hl-tasks{grid-template-columns:1fr}
  html body .hl-body{padding:16px 16px 14px}
  html body .hero h1{font-size:clamp(34px,8.4vw,50px) !important}
}
@media (prefers-reduced-motion: reduce){
  html body .hl-caret{animation:none}
  html body .hl-live-dot{animation:none}
}