/* ============================================================
   众泰云 · 首屏「全景」v1（第五十二批）
   ------------------------------------------------------------
   用户指正：首页只讲了一句话，没有展现众泰云的整体模块布局。
   本版把首屏改成**系统全景**：一屏内看到全部子系统，
   且**每个模块用不同的可视化**（不是一排等权卡片 —— 那正是旧首页的病）。

   模块与各自的视觉语言：
     天策核心   → 实时对话流（已有）
     会员体系   → 四档阶梯，逐档加宽 + 档位色
     AI 算力返利 → 圆环进度 + 金额
     卖家中心   → 迷你订单列表
     情感伙伴   → 人设设定卡（可自定义）
     建站/获客  → 三个指标磁贴 + 迷你趋势线
     底部       → 一条流水线：建站 → 订单 → 获客 → 复购

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

:root{
  --tier-1:#8A8A8A; --tier-2:#7DA2C9; --tier-3:#E8A33D; --tier-4:#C77E1F;
  --mod-line:rgba(255,255,255,.09);
}

/* ---------- 首屏整体：文案收窄、给全景让位 ---------- */
html body .hero{padding-top:clamp(76px,9.5vh,116px) !important}
html body .hero h1{font-size:clamp(34px,4.4vw,68px) !important;line-height:1.12 !important;letter-spacing:-.028em !important}
html body .hero .hero-sub{max-width:660px !important;font-size:clamp(14px,1.1vw,16px) !important}
html body .hero .hero-cta{margin-top:22px !important}
html body .hero .btn{height:50px !important;padding:0 28px !important;font-size:15px !important}

/* 旧的活工作台单独放时太占高，改作全景里的一格 */
html body .hero-live{margin-top:0 !important;box-shadow:0 20px 60px -24px rgba(0,0,0,.7) !important;border-radius:14px !important}
html body .hero-live .hl-body{min-height:0 !important;padding:14px 16px 14px !important;gap:10px !important}
html body .hero-live .hl-tasks{grid-template-columns:1fr !important;gap:6px !important}
html body .hero-live .hl-input{display:none !important}   /* 全景里的天策格不占位放输入框 */
html body .hero-live .hl-bubble{font-size:12.5px !important;padding:9px 12px !important}

/* ---------- 全景面板 ---------- */
html body .zt-pano{
  position:relative;width:100%;max-width:min(1340px,97vw);
  margin:clamp(28px,4.2vh,50px) auto 0;
  border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg, rgba(24,29,42,.72), rgba(12,16,23,.92));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    0 -1px 0 rgba(255,255,255,.12) inset,
    0 50px 130px -34px rgba(0,0,0,.92),
    0 0 140px -10px rgba(232,163,61,.26);
  padding:16px;
  display:grid;gap:14px;
  grid-template-columns:repeat(12,1fr);
}
html body .zt-pano::before{
  content:"";position:absolute;left:50%;top:-30%;transform:translateX(-50%);
  width:70%;height:70%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side, rgba(232,163,61,.34), transparent 72%);
  filter:blur(70px);
}

/* 模块通用外观 */
html body .zp{
  position:relative;z-index:1;border-radius:14px;padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border:1px solid var(--mod-line);
  transition:transform .4s cubic-bezier(.22,1,.36,1), border-color .4s, box-shadow .4s;
  overflow:hidden;
}
html body .zp:hover{transform:translateY(-3px);border-color:rgba(232,163,61,.30);
  box-shadow:0 20px 48px -20px rgba(0,0,0,.72)}
html body .zp-h{display:flex;align-items:center;gap:9px;margin-bottom:12px}
html body .zp-ico{
  width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:14px;
  background:linear-gradient(145deg, rgba(240,197,131,.22), rgba(199,126,31,.10));
  border:1px solid rgba(232,163,61,.26);
}
html body .zp-t{font-size:14px;font-weight:650;color:#fff;letter-spacing:-.005em}
html body .zp-tag{
  margin-left:auto;font-family:var(--font-mono-zt,ui-monospace,monospace);
  font-size:10.5px;letter-spacing:.06em;padding:2px 8px;border-radius:999px;
  color:#F0C583;background:rgba(232,163,61,.12);border:1px solid rgba(232,163,61,.24);
}
html body .zp-sub{font-size:11.5px;color:rgba(255,255,255,.44);margin-top:-6px;margin-bottom:11px}

/* 栅格：天策 6 列 · 会员 6 列 · 三格各 4 列 */
html body .zp-tiance{grid-column:span 6}
html body .zp-member{grid-column:span 6}
html body .zp-rebate{grid-column:span 4}
html body .zp-seller{grid-column:span 4}
html body .zp-friend{grid-column:span 4}

/* ---------- 会员体系：四档阶梯 ---------- */
html body .tiers{display:flex;flex-direction:column;gap:7px}
html body .tier{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  font-size:12.5px;color:rgba(255,255,255,.72);
  position:relative;overflow:hidden;
  transition:background .3s,border-color .3s;
}
html body .tier::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--t);opacity:.9}
html body .tier:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14)}
html body .tier b{color:#fff;font-weight:600;min-width:74px}
html body .tier .tier-pct{
  margin-left:auto;font-family:var(--font-mono-zt,ui-monospace,monospace);font-size:11.5px;
  color:var(--t);letter-spacing:.02em;
}
/* 四档宽度递增：一眼看出"越往上权益越大" */
html body .tier:nth-child(1){width:78%;--t:var(--tier-1)}
html body .tier:nth-child(2){width:86%;--t:var(--tier-2)}
html body .tier:nth-child(3){width:94%;--t:var(--tier-3)}
html body .tier:nth-child(4){width:100%;--t:var(--tier-4)}

/* ---------- AI 算力返利：圆环 + 金额 ---------- */
html body .rebate{display:flex;align-items:center;gap:16px}
html body .ring{
  width:92px;height:92px;flex:none;border-radius:50%;
  background:conic-gradient(#E8A33D 0turn, #F0C583 .62turn, rgba(255,255,255,.08) .62turn);
  display:grid;place-items:center;position:relative;
}
html body .ring::after{
  content:"";position:absolute;inset:7px;border-radius:50%;
  background:linear-gradient(180deg,#141922,#0E1219);
}
html body .ring i{
  position:relative;z-index:1;font-style:normal;font-size:19px;font-weight:700;color:#fff;
  font-family:var(--font-mono-zt,ui-monospace,monospace);
}
html body .ring i small{display:block;font-size:9.5px;font-weight:500;color:rgba(255,255,255,.45);letter-spacing:.04em}
html body .rebate-meta{font-size:12px;color:rgba(255,255,255,.56);line-height:1.8}
html body .rebate-meta b{color:#F0C583;font-family:var(--font-mono-zt,ui-monospace,monospace)}

/* ---------- 卖家中心：迷你订单 ---------- */
html body .orders{display:flex;flex-direction:column;gap:6px}
html body .ord{display:flex;align-items:center;gap:9px;font-size:12px;color:rgba(255,255,255,.66);
  padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.06)}
html body .ord .ok2{width:6px;height:6px;border-radius:50%;background:#3ddc84;flex:none;box-shadow:0 0 8px #3ddc84}
html body .ord .wait{width:6px;height:6px;border-radius:50%;background:#E8A33D;flex:none;box-shadow:0 0 8px #E8A33D}
html body .ord .amt{margin-left:auto;font-family:var(--font-mono-zt,ui-monospace,monospace);color:#fff}

/* ---------- 情感伙伴：人设卡 ---------- */
html body .friend{display:flex;gap:11px;align-items:flex-start}
html body .friend-av{
  width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:19px;
  background:linear-gradient(145deg, rgba(167,139,250,.26), rgba(91,141,239,.14));
  border:1px solid rgba(167,139,250,.30);
}
html body .friend-body{flex:1;min-width:0}
html body .friend-name{font-size:12.5px;color:#fff;font-weight:600}
html body .friend-desc{font-size:11.5px;color:rgba(255,255,255,.46);line-height:1.6;margin-top:3px}
html body .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
html body .chip{
  font-size:10.5px;padding:3px 9px;border-radius:999px;
  color:rgba(255,255,255,.70);background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);
}
html body .chip.on{color:#fff;background:rgba(167,139,250,.18);border-color:rgba(167,139,250,.38)}

/* ---------- 建站/获客：指标 + 迷你趋势 ---------- */
html body .kpis{display:flex;gap:14px}
html body .kpi{flex:1;min-width:0}
html body .kpi-n{font-size:21px;font-weight:700;color:#fff;font-family:var(--font-mono-zt,ui-monospace,monospace);
  font-variant-numeric:tabular-nums}
html body .kpi-l{font-size:11px;color:rgba(255,255,255,.44);margin-top:2px}
html body .spark{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:12px}
html body .spark i{
  flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg, rgba(232,163,61,.85), rgba(232,163,61,.22));
  animation:sparkGrow .9s cubic-bezier(.22,1,.36,1) both;
}
@keyframes sparkGrow{from{height:6% !important;opacity:.3}}

/* ---------- 底部流水线 ---------- */
html body .flow{
  grid-column:span 12;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 16px;border-radius:12px;
  background:rgba(232,163,61,.045);border:1px solid rgba(232,163,61,.16);
  font-size:12.5px;color:rgba(255,255,255,.62);
  font-family:var(--font-mono-zt,ui-monospace,monospace);letter-spacing:.02em;
}
html body .flow b{color:#F0C583;font-weight:600}
html body .flow .ar{color:rgba(232,163,61,.55)}

/* ---------- 窄屏 ---------- */
@media (max-width:1100px){
  html body .zp-tiance,html body .zp-member{grid-column:span 12}
  html body .zp-rebate,html body .zp-seller,html body .zp-friend{grid-column:span 6}
}
@media (max-width:760px){
  html body .zt-pano{grid-template-columns:1fr;padding:12px}
  html body .zp,html body .zp-tiance,html body .zp-member,
  html body .zp-rebate,html body .zp-seller,html body .zp-friend,
  html body .flow{grid-column:span 1}
  html body .tier:nth-child(n){width:100%}
  html body .ring{width:78px;height:78px}
}
@media (prefers-reduced-motion: reduce){
  html body .spark i{animation:none}
}