/* ==========================================================================
   君不器官网 · UI v6「对标 WorkBuddy 板块」覆盖层
   --------------------------------------------------------------------------
   依据：用户第 6 轮截图批注 1–3 条。
     1 事实摘要板块不该出现在首屏后 → 移到页脚前、折叠弱化；删掉第一行「主体」
     2 行业场景 → 模仿 WorkBuddy「你的工作好帮手 / AI 场景」板块
                   （胶囊 Tab + 一整块大面板，左文案右画面；去掉拖动条与碎卡片）
     3 已链接操作台 → 模仿 WorkBuddy「打通腾讯生态」板块
                   （居中大标题 + 副标题 + 一排白色圆角 logo 卡）

   加载顺序：style.css → ui-v4.css → ui-v5.css → ui-v6.css
   v4 / v5 保持零改动，仅覆盖本轮涉及的三个板块，随时可回退。
   约束：零第三方依赖、深色少用、大圆角（避免锐利矩形）、零重阴影、
        禁用 JS 时四个场景文案与占位说明全部可见、尊重 prefers-reduced-motion。
   ========================================================================== */

:root{
  --v6-r-xl:24px;
  --v6-r-lg:18px;
  --v6-r-md:14px;
  --v6-hair:rgba(15,76,158,.09);
  --v6-hair-2:rgba(15,76,158,.055);
  --v6-surface:#F3F8FD;
  --v6-surface-2:#F8FBFE;
  --v6-ease:cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   A. 第 1 条 · 事实摘要：移出首屏，页脚前折叠弱化
   --------------------------------------------------------------------------
   默认只占一行 12px 灰字，展开后才是 dl；内容仍在 DOM 中供检索与 AI 引用，
   JSON-LD / llms.txt 的完整事实数据不受影响。第一行「主体」已删除。
   ========================================================================== */
.v6-facts{
  border-top:1px solid var(--v6-hair-2);
  padding:22px 0 30px;
}
.v6-facts summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:#8A9AAB;
  transition:color .2s;
}
.v6-facts summary::-webkit-details-marker{display:none}
.v6-facts summary::after{content:"+";font:400 15px/1 var(--mono);color:var(--blue)}
.v6-facts[open] summary::after{content:"−"}
.v6-facts summary:hover{color:var(--blue)}
.v6-facts summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.v6-facts .wrap{padding-top:20px}
.v6-facts-list{margin:0;display:grid;gap:0;max-width:980px}
.v6-facts-list>div{
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;
  padding:12px 0;border-top:1px solid var(--v6-hair-2);
}
.v6-facts-list dt{font-size:12.5px;color:var(--blue);letter-spacing:.04em;padding-top:2px}
.v6-facts-list dd{margin:0;font-size:13.5px;line-height:1.85;color:#7B8899}
@media(max-width:600px){
  .v6-facts-list>div{grid-template-columns:56px minmax(0,1fr);gap:12px}
}

/* ==========================================================================
   B. 第 2 条 · 行业场景（对标「你的工作好帮手」）
   --------------------------------------------------------------------------
   结构：左大标题 + 右说明 → 胶囊 Tab 组 → 一整块大圆角面板
        （左 1/3 文案 / 右 2/3 演示画面）。无横向滚动、无拖动条、无左右箭头。
   ========================================================================== */
.v6-scenes{padding:clamp(66px,6.8vw,104px) 0 clamp(60px,6vw,92px);position:relative}
.v6-kicker{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;
  font:600 11.5px/1 var(--mono);letter-spacing:.12em;color:var(--blue);
  background:rgba(15,76,158,.045);border:1px solid var(--v6-hair-2);
  border-radius:var(--v6-r-pill,999px);padding:8px 13px;
}
.v6-kicker i{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none}
.v6-kicker em{font-style:normal;color:#9AA9BA;font-weight:500;letter-spacing:.1em}
.v6-head-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,430px);
  gap:clamp(28px,5vw,80px);align-items:end;
}
.v6-title{
  font-size:clamp(38px,4.6vw,60px);font-weight:500;letter-spacing:-.035em;
  line-height:1.14;margin:0;color:var(--ink);
}
.v6-lede{font-size:16px;line-height:1.92;color:var(--grey);margin:0 0 6px}
.v6-title-sub{
  margin:20px 0 0;font-size:15px;color:var(--blue);letter-spacing:.01em;
}
/* 胶囊 Tab 组：外层浅灰胶囊，选中项白底凸起（极轻阴影，非硬边矩形） */
.v6-tabbar{
  display:inline-flex;flex-wrap:wrap;gap:4px;margin:clamp(30px,3.4vw,44px) 0 0;
  padding:5px;border-radius:999px;background:var(--v6-surface);
  border:1px solid var(--v6-hair-2);
}
.v6-tab{
  appearance:none;border:0;background:transparent;font-family:inherit;cursor:pointer;
  border-radius:999px;padding:11px 24px;font-size:15px;color:#6C7C8E;
  transition:background .22s,color .22s,box-shadow .22s;
}
.v6-tab:hover{color:var(--blue)}
.v6-tab[aria-selected="true"]{
  background:#fff;color:var(--blue);font-weight:500;
  box-shadow:0 1px 4px rgba(10,27,51,.06);
}
.v6-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* 一整块大面板 */
.v6-stage{
  margin-top:clamp(22px,2.4vw,32px);
  border:1px solid var(--v6-hair);border-radius:var(--v6-r-xl);
  background:linear-gradient(175deg,#FCFEFF 0%,#F3F9FE 100%);
  overflow:hidden;
}
.v6-panel{
  display:grid;grid-template-columns:minmax(0,35%) minmax(0,65%);
  min-height:clamp(380px,36vw,470px);
}
/* 禁用 JS：四个 panel 依次纵向堆叠，文案全部可读；JS 接管后只显示当前项 */
.js-scenes .v6-panel{display:none}
.js-scenes .v6-panel.is-active{display:grid;animation:v6-fade .42s var(--v6-ease)}
@keyframes v6-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .js-scenes .v6-panel.is-active{animation:none}
}

.v6-panel-copy{
  padding:clamp(30px,3.6vw,54px);display:flex;flex-direction:column;
  justify-content:center;min-width:0;
}
.v6-panel-tag{
  font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--blue);margin:0;
}
.v6-panel-copy h3{
  font-size:clamp(24px,2.3vw,31px);font-weight:500;letter-spacing:-.025em;
  line-height:1.38;margin:20px 0 16px;color:var(--ink);
  text-wrap:balance;                  /* 中文长标题均衡折行，避免单字掉到第二行 */
}
.v6-panel-copy>p:not(.v6-panel-tag){
  font-size:15px;line-height:1.92;color:var(--grey);margin:0;max-width:38ch;
}
.v6-panel-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  font-size:14.5px;color:var(--blue);text-decoration:none;width:max-content;
}
.v6-panel-link:hover{text-decoration:underline;text-underline-offset:4px}
.v6-panel-link svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* 右侧演示画面：贴着面板右/下边缘的大窗口，内含示意界面骨架 + 占位标注 */
.v6-panel-visual{
  position:relative;display:flex;align-items:flex-end;min-width:0;
  padding:clamp(22px,2.6vw,38px) clamp(22px,2.6vw,38px) 0 0;
}
.v6-demo{
  position:relative;width:100%;height:100%;min-height:clamp(330px,33vw,432px);
  border:1px solid var(--v6-hair);border-bottom:0;
  border-radius:var(--v6-r-lg) var(--v6-r-lg) 0 0;
  background:#fff;overflow:hidden;
  display:flex;flex-direction:column;   /* 让骨架用 flex 撑满，避免下半留白 */
}
.v6-demo-bar{
  height:38px;display:flex;align-items:center;gap:6px;padding:0 14px;
  border-bottom:1px solid var(--v6-hair-2);background:#FCFEFF;
}
.v6-demo-bar i{width:8px;height:8px;border-radius:50%;background:#DCE6F1;flex:none}
.v6-demo-bar i:first-child{background:var(--cyan);opacity:.75}
.v6-demo-bar span{margin-left:auto;font:500 10px/1 var(--mono);
  letter-spacing:.1em;color:#9AA9BA}
/* 示意界面骨架：极淡灰块，模拟知识库工作台，让占位窗口不空白 */
.v6-skel{display:grid;grid-template-columns:26% minmax(0,1fr);flex:1;min-height:0}
.v6-skel-side{padding:18px 14px;border-right:1px solid var(--v6-hair-2);
  background:#FAFCFE;display:flex;flex-direction:column;gap:11px}
.v6-skel-logo{width:26px;height:26px;border-radius:8px;background:var(--v6-surface);
  border:1px solid var(--v6-hair);margin-bottom:6px}
.v6-skel-line{height:7px;border-radius:4px;background:#E9F0F8;display:block}
.v6-skel-line.w70{width:70%}.v6-skel-line.w90{width:90%}
.v6-skel-line.w60{width:60%}.v6-skel-line.w80{width:80%}
.v6-skel-line.w50{width:50%}
.v6-skel-line.on{background:#D6E8FA}
.v6-skel-main{padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.v6-skel-search{height:26px;border-radius:8px;background:#F2F7FC;
  border:1px solid var(--v6-hair-2);width:62%}
.v6-skel-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.v6-skel-cards span{height:52px;border-radius:10px;background:#F1F7FD;
  border:1px solid var(--v6-hair-2)}
.v6-skel-cards span:nth-child(2){background:#EAF3FC}
.v6-skel-doc{border:1px solid var(--v6-hair-2);border-radius:10px;
  padding:16px;display:flex;flex-direction:column;gap:9px;flex:1;
  justify-content:space-between}   /* 线条均匀铺满文档区，不留大片空白 */
.v6-skel-doc i{height:7px;border-radius:4px;background:#EDF3FA;display:block;width:100%}
.v6-skel-doc i:nth-child(1){width:52%;height:10px;background:#DCEAF8}
.v6-skel-doc i:nth-child(3){width:88%}.v6-skel-doc i:nth-child(4){width:94%}
.v6-skel-doc i:nth-child(5){width:70%}.v6-skel-doc i:nth-child(6){width:82%}
/* 占位标注：只在中间一小块半透明，四周仍能看到示意界面 */
.v6-demo-mask{
  position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  width:min(72%,310px);padding:20px 18px;text-align:center;
  background:rgba(255,255,255,.90);backdrop-filter:blur(3px);
  border:1px solid var(--v6-hair);border-radius:var(--v6-r-lg);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.v6-demo-play{width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(15,76,158,.22);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--blue)}
.v6-demo-play svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-left:2px}
.v6-demo-mask b{font-size:14px;font-weight:500;color:var(--ink)}
.v6-demo-mask small{font-size:12px;color:var(--grey);line-height:1.7}
.v6-ph-tag{
  display:inline-block;margin-top:2px;font:500 10px/1 var(--mono);
  letter-spacing:.08em;color:#8A9AAB;border:1px dashed var(--v6-hair);
  border-radius:999px;padding:5px 9px;
}

/* 已验证结果：沿用 v5 的三列数字，弱化字号避免抢大面板的视觉主角 */
.v6-scenes .v5-proofs{margin-top:clamp(38px,4.4vw,58px)}
.v6-scenes .v5-proof b{
  font-size:clamp(25px,2.8vw,34px);font-weight:400;letter-spacing:-.035em;
  color:var(--blue);margin-bottom:8px;
}
.v6-scenes .v5-proof:last-child b{font-size:clamp(20px,2.1vw,25px);font-weight:500;letter-spacing:-.02em}
.v6-scenes .v5-proof span{font-size:13px}

/* ==========================================================================
   C. 第 3 条 · 已链接操作台（对标「打通腾讯生态」）
   --------------------------------------------------------------------------
   极浅背景 + 从中心发散的发丝射线；居中大标题、居中副标题；
   一排白色圆角 logo 卡，两端轻微淡出。无拖动条、无滚动控件。
   ========================================================================== */
.v6-eco{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(78px,8vw,124px) 0 clamp(72px,7.4vw,112px);
  background:linear-gradient(180deg,#F9FBFE 0%,#F1F6FC 100%);
  border-top:1px solid rgba(255,255,255,.9);
  border-bottom:1px solid var(--v6-hair-2);
}
.v6-rays{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-conic-gradient(from 180deg at 50% 46%,
    rgba(15,76,158,.085) 0deg .26deg,transparent .26deg 3.6deg);
  -webkit-mask-image:radial-gradient(ellipse 74% 74% at 50% 46%,#000 0%,transparent 84%);
  mask-image:radial-gradient(ellipse 74% 74% at 50% 46%,#000 0%,transparent 84%);
}
.v6-eco .wrap{position:relative}
.v6-eco-title{
  font-size:clamp(31px,3.7vw,50px);font-weight:500;letter-spacing:-.03em;
  line-height:1.3;margin:0;color:var(--ink);
}
.v6-eco-lede{
  max-width:620px;margin:18px auto 0;font-size:15.5px;line-height:1.9;color:var(--grey);
}
.v6-logo-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  max-width:900px;margin:clamp(42px,5vw,66px) auto 0;
}
.v6-logo-card{
  min-width:0;min-height:104px;padding:18px 10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:#fff;border:1px solid rgba(15,76,158,.05);
  border-radius:var(--v6-r-lg);
  transition:transform .25s var(--v6-ease);
}
.v6-logo-card:hover{transform:translateY(-3px)}
.v6-logo-mark{
  width:60px;height:60px;flex:none;
  border-radius:16px;background:transparent;border:0;padding:0;
  object-fit:contain;display:block;margin:0 auto;
  filter:drop-shadow(0 2px 6px rgba(15,30,60,.10));
}
/* 平台图标现均采用各官方 app 图标（自带圆角方底 + 透明圆角），直接展示，无需额外底色槽 */
.v6-logo-card b{font-size:14px;font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.v6-logo-card small{font-size:11.5px;color:#9AA9BA;line-height:1.4}
/* 占位卡：虚线边 + 更淡，明确不是真实已链接操作台 */
.v6-logo-card.is-ph{background:rgba(255,255,255,.55);border:1px dashed rgba(15,76,158,.16)}
.v6-logo-card.is-ph .v6-logo-mark{background:transparent;color:#A9B8C8;border-style:dashed}
.v6-logo-card.is-ph b,.v6-logo-card.is-ph small{color:#A9B8C8}
.v6-eco-note{
  max-width:760px;margin:clamp(30px,3.4vw,44px) auto 0;
  font-size:14px;line-height:1.9;color:#8A9AAB;
}

/* ==========================================================================
   D. 响应式
   ========================================================================== */
@media(max-width:1024px){
  .v6-head-row{grid-template-columns:minmax(0,1fr) minmax(240px,360px);gap:32px}
  .v6-logo-row{gap:10px}
}
@media(max-width:860px){
  .v6-head-row{grid-template-columns:1fr;gap:18px;align-items:start}
  .v6-lede{max-width:62ch}
  .v6-panel{grid-template-columns:1fr;min-height:0}
  .js-scenes .v6-panel.is-active{display:flex;flex-direction:column}
  .v6-panel-copy{padding:30px 30px 8px}
  .v6-panel-copy>p:not(.v6-panel-tag){max-width:60ch}
  .v6-panel-link{margin-top:20px}
  .v6-panel-visual{padding:22px 22px 0}
  .v6-demo{min-height:320px;border-radius:var(--v6-r-lg) var(--v6-r-lg) 0 0}
  .v6-logo-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}
  .v6-rays{-webkit-mask-image:radial-gradient(ellipse 92% 62% at 50% 46%,#000,transparent 85%);
    mask-image:radial-gradient(ellipse 92% 62% at 50% 46%,#000,transparent 85%)}
}
@media(max-width:600px){
  .v6-title{font-size:36px}
  .v6-kicker{font-size:10.5px;padding:7px 11px}
  .v6-tabbar{display:flex;width:100%;border-radius:var(--v6-r-lg);justify-content:space-between}
  .v6-tab{flex:1 1 44%;padding:10px 8px;font-size:13.5px;text-align:center}
  .v6-tab[aria-selected="true"]{box-shadow:0 1px 3px rgba(10,27,51,.05)}
  .v6-stage{border-radius:var(--v6-r-lg)}
  .v6-panel-copy{padding:26px 22px 4px}
  .v6-panel-copy h3{font-size:24px}
  .v6-panel-visual{padding:18px 16px 0}
  .v6-demo{min-height:260px}
  .v6-skel-side{padding:12px 9px;gap:8px}
  .v6-skel-main{padding:14px 14px;gap:10px}
  .v6-skel-cards span{height:36px}
  .v6-demo-mask{width:86%;padding:16px 12px;gap:7px}
  .v6-logo-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:100%}
  .v6-logo-card{min-height:92px}
  .v6-eco-title{font-size:29px}
}