/* ==========================================================================
   shyy.css —— 企微私域运营 Demo（安诚财险 1323 工程）
   ========================================================================== */

body { background: var(--bg); }

/* 语义色调 */
.sy-t-brand { --lt: var(--brand); --lt-bg: var(--brand-50); --lt-bd: var(--brand-100); }
.sy-t-blue { --lt: var(--info); --lt-bg: var(--info-bg); --lt-bd: #D6E4FA; }
.sy-t-teal { --lt: var(--teal); --lt-bg: #E6F6F4; --lt-bd: #CFEDE8; }
.sy-t-violet { --lt: var(--violet); --lt-bg: #F1ECFE; --lt-bd: #E2D9FD; }
.sy-t-gold { --lt: var(--gold); --lt-bg: var(--gold-50); --lt-bd: #F2E3C4; }
.sy-t-gray { --lt: #6B7078; --lt-bg: var(--bg-3); --lt-bd: var(--line-2); }

/* ==========================================================================
   1. 主视觉
   ========================================================================== */
.sy-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #16386F 0%, #1B4E9B 45%, #0E2A55 100%);
  color: #fff; padding: 34px 30px 40px;
}
.sy-hero::before {
  content: ""; position: absolute; right: -140px; top: -180px; width: 520px; height: 520px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 68%);
}
.sy-hero::after {
  content: ""; position: absolute; left: -90px; bottom: -210px; width: 440px; height: 440px;
  border-radius: 50%; background: radial-gradient(circle, rgba(199,0,11,.34), rgba(199,0,11,0) 70%);
}
.sy-hero-inner { position: relative; max-width: 1280px; margin: 0 auto; }
.sy-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px; border-radius: 99px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24);
  font-size: 11.5px; font-weight: 700; letter-spacing: .6px;
}
.sy-badge .dot-live {
  width: 6px; height: 6px; border-radius: 50%; background: #7CFFB2;
  box-shadow: 0 0 0 4px rgba(124,255,178,.22);
}
.sy-hero h1 { margin-top: 16px; font-size: 27px; font-weight: 800; letter-spacing: -.3px; line-height: 1.3; }
.sy-hero h1 em { font-style: normal; color: #FFD9A0; }
.sy-sub { margin-top: 12px; font-size: 13.5px; color: rgba(255,255,255,.82); line-height: 1.8; max-width: 940px; }
.sy-sub b { color: #fff; }
.sy-metrics { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.sy-metric {
  min-width: 140px; padding: 12px 16px; border-radius: var(--r-l);
  background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.16);
}
.sy-metric .v { font-size: 24px; font-weight: 800; letter-spacing: -.4px; font-family: var(--font-num); line-height: 1; }
.sy-metric .v small { font-size: 12px; font-weight: 600; margin-left: 3px; color: rgba(255,255,255,.72); }
.sy-metric .k { margin-top: 7px; font-size: 11px; color: rgba(255,255,255,.68); line-height: 1.5; }
.sy-goal {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 20px;
  padding: 12px 15px; border-radius: var(--r-m);
  background: rgba(255,255,255,.1); border: 1px dashed rgba(255,255,255,.3);
  font-size: 12.5px; color: rgba(255,255,255,.9); line-height: 1.65;
}
.sy-goal svg { flex: none; margin-top: 2px; }

/* ==========================================================================
   2. 容器与分区
   ========================================================================== */
.sy-body { max-width: 1280px; margin: 0 auto; padding: 26px 30px 50px; }
.sy-sec { margin-bottom: 34px; }
.sy-sec-h { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 15px; flex-wrap: wrap; }
.sy-sec-h .bar { width: 4px; height: 20px; border-radius: 3px; background: var(--brand-grad); }
.sy-sec-h h2 { font-size: 19px; font-weight: 800; letter-spacing: .2px; }
.sy-sec-h p { font-size: 12px; color: var(--ink-4); margin-bottom: 2px; line-height: 1.6; }
.sy-sec-h p b { color: var(--ink-2); }

/* ==========================================================================
   3. 场景化交互演示
   ========================================================================== */
.sy-tabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; margin-bottom: 16px; }
@media (max-width: 1080px) { .sy-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .sy-tabs { grid-template-columns: minmax(0,1fr); } }
.sy-tab {
  display: flex; align-items: flex-start; gap: 10px; padding: 14px;
  border-radius: var(--r-l); background: #fff; border: 1.5px solid var(--line);
  text-align: left; cursor: pointer; transition: all .16s ease;
}
.sy-tab:hover { border-color: var(--lt-bd); transform: translateY(-2px); }
.sy-tab.on { border-color: var(--lt); background: var(--lt-bg); box-shadow: 0 6px 18px rgba(16,18,24,.09); }
.sy-tab .st-i {
  width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--lt-bg); color: var(--lt);
}
.sy-tab.on .st-i { background: #fff; }
.sy-tab .st-t { font-size: 13.5px; font-weight: 800; }
.sy-tab .st-s { margin-top: 4px; font-size: 10.5px; color: var(--ink-4); line-height: 1.55; }

.sy-stage {
  background: #fff; border-radius: var(--r-2xl); border: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(16,18,24,.09); overflow: hidden;
}
.sy-stage-h {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #FFFFFF, #FCFCFD);
}
.sy-stage-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sy-stg-ico { width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: var(--lt-bg); color: var(--lt); }
.sy-stg-t { font-size: 15px; font-weight: 800; }
.sy-stg-s { margin-top: 4px; font-size: 11.5px; color: var(--ink-4); line-height: 1.55; }
.sy-stage-picker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.sp-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-4); }
.sp-opt {
  font-size: 11px; padding: 5px 11px; border-radius: 99px; cursor: pointer;
  background: var(--bg-3); color: var(--ink-3); border: 1px solid var(--line);
}
.sp-opt:hover { border-color: var(--brand-200); }
.sp-opt.on { background: var(--brand-50); color: var(--brand); border-color: var(--brand-100); font-weight: 700; }
.sy-stage-ctrl { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sy-stage-step {
  font-size: 11.5px; font-weight: 700; color: var(--ink-4);
  padding: 5px 11px; border-radius: 99px; background: var(--bg-3); white-space: nowrap;
}
.sy-stage-step.on { background: var(--brand-50); color: var(--brand); }
.sy-stage-prog { width: 96px; height: 5px; border-radius: 99px; background: var(--bg-3); overflow: hidden; flex: none; }
.sy-stage-prog i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--brand-grad); transition: width .35s ease; }
#btnAuto.on { background: var(--brand); color: #fff; border-color: var(--brand); }

.sy-stage-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 18px; background: var(--brand-50); border-bottom: 1px solid var(--brand-100);
  font-size: 12px; color: var(--ink-3); line-height: 1.7;
}
.sy-stage-note svg { flex: none; margin-top: 2px; color: var(--brand); }
.sy-stage-note b { color: var(--ink); }

.sy-stage-body {
  display: grid; grid-template-columns: 400px minmax(0,1fr); gap: 18px; padding: 18px;
  align-items: start;
}
@media (max-width: 1080px) { .sy-stage-body { grid-template-columns: minmax(0,1fr); } }
.sy-phone-wrap { min-width: 0; }

.sy-cap {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--ink-4); letter-spacing: .4px; margin-bottom: 9px;
}

/* --- 客户侧手机 --- */
.sy-phone {
  position: relative; width: 100%; max-width: 340px; margin: 0 auto;
  border-radius: 30px; background: #16181D; padding: 9px;
  box-shadow: 0 14px 36px rgba(16,18,24,.22);
  display: flex; flex-direction: column;
}
.sy-phone-notch {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 20px; border-radius: 99px; background: #0E1013; z-index: 3;
}
.sy-phone-screen {
  border-radius: 23px; background: #F5F6F8; overflow: hidden;
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
}
.sy-phone-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px 7px; font-size: 11px; font-weight: 700; color: var(--ink-3);
  background: #fff;
}
.sy-phone-bar .pb-right { font-size: 10px; color: var(--ink-4); font-weight: 600; }
.sy-phone-body {
  height: 470px; overflow-y: auto; padding: 12px 12px 16px;
  background: linear-gradient(180deg,#EFF1F5,#F7F8FA);
  scrollbar-width: thin;
}
.sy-empty {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--ink-4); font-size: 11.5px; text-align: center; padding: 0 20px;
}
.sy-empty svg { color: var(--ink-5); }

/* 系统侧：主面板与链路纵向排布，避免与手机高度不匹配留下大片空白 */
.sy-sys-wrap { display: flex; flex-direction: column; }
.sy-sys-wrap .sy-sys { flex: 0 0 auto; }
.sy-sys-wrap .sy-sys-be { flex: 1 1 auto; }

.sy-chat { display: flex; flex-direction: column; gap: 9px; }
.sy-msg { display: flex; gap: 8px; align-items: flex-start; }
.sy-msg.me { flex-direction: row-reverse; }
.sy-msg .av {
  width: 28px; height: 28px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg,#3D4048,#16181D); color: #fff; font-size: 9.5px; font-weight: 800;
}
.sy-msg.me .av { background: linear-gradient(135deg,#2B6CD4,#1B4E9B); }
.sy-msg .bubble {
  max-width: 232px; padding: 9px 12px; border-radius: 4px 12px 12px 12px;
  background: #fff; font-size: 12px; line-height: 1.65; color: var(--ink);
  box-shadow: 0 1px 3px rgba(22,24,29,.07);
}
.sy-msg.me .bubble { background: linear-gradient(135deg,#3E7BDE,#2B6CD4); color: #fff; border-radius: 12px 4px 12px 12px; }
.sy-msg .bubble.card { padding: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.sy-msg .bubble.card .bt {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  font-size: 11.5px; font-weight: 700; background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.sy-msg .bubble.card .bs { padding: 9px 12px; font-size: 11px; color: var(--ink-3); line-height: 1.6; }
.sy-msg .bubble.card .bb {
  display: block; width: 100%; height: 34px; border-top: 1px solid var(--line);
  background: #fff; color: var(--brand); font-size: 12px; font-weight: 700;
}
.sy-msg .bubble.card .bb:hover { background: var(--brand-50); }

.sy-msg-sys {
  display: flex; align-items: flex-start; gap: 6px; padding: 8px 11px;
  border-radius: var(--r-s); background: rgba(22,24,29,.055); color: var(--ink-3);
  font-size: 10.5px; line-height: 1.6;
}
.sy-msg-sys svg { flex: none; margin-top: 1px; color: var(--ink-4); }
.sy-msg-ai {
  display: flex; align-items: flex-start; gap: 6px; padding: 8px 11px;
  border-radius: var(--r-s); background: #F1ECFE; color: var(--violet);
  font-size: 10.5px; font-weight: 600; line-height: 1.6;
}
.sy-msg-tag {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 6px 11px; border-radius: 99px;
  background: #FFFBF3; color: var(--gold); border: 1px solid #F2E3C4;
  font-size: 10.5px; font-weight: 700;
}
.sy-quick { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 36px; }
.sy-quick button {
  height: 28px; padding: 0 12px; border-radius: 99px;
  background: #fff; border: 1px solid var(--brand-200); color: var(--brand);
  font-size: 11px; font-weight: 600;
}
.sy-quick button:hover { background: var(--brand-50); }

/* --- 系统侧 --- */
.sy-sys {
  border-radius: var(--r-l); border: 1px solid var(--line); background: #FCFCFD; padding: 15px;
}
.sy-sys-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; margin-bottom: 12px; }
.sy-sys-head svg { color: var(--brand); flex: none; }
.sy-lead {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; padding: 11px 13px;
  border-radius: var(--r-m); background: var(--brand-50); border: 1px solid var(--brand-100);
}
.sy-lead .sl-k { font-size: 11px; color: var(--ink-4); }
.sy-lead .sl-v { margin-left: auto; font-size: 15px; font-weight: 800; color: var(--brand); font-family: var(--font-num); }
.sy-kvs { display: flex; flex-direction: column; gap: 9px; }
.sy-kvs .kv2 span { flex: none; color: var(--ink-4); font-size: 11.5px; }
.sy-kvs .kv2 b { text-align: right; font-size: 11.5px; color: var(--ink); }

/* 家庭关系网络 */
.sy-family { margin-top: 13px; padding-top: 13px; border-top: 1px dashed var(--line-2); }
.sf-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; margin-bottom: 10px; }
.sf-h svg { color: var(--gold); }
.sf-owner {
  display: flex; align-items: center; gap: 9px; padding: 11px 12px;
  border-radius: var(--r-m); background: var(--gold-50); border: 1px solid #F2E3C4;
}
.sf-owner svg { color: var(--gold); flex: none; }
.sf-owner b { font-size: 12.5px; }
.sf-owner span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--ink-4); }
.sf-members { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 9px; }
@media (max-width: 640px) { .sf-members { grid-template-columns: minmax(0,1fr); } }
.sf-member { padding: 10px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line); }
.sm-h { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; }
.sm-h svg { color: var(--ink-4); flex: none; }
.sm-s { margin-top: 4px; font-size: 10.5px; color: var(--ink-4); line-height: 1.5; }
.sm-gap {
  margin-top: 6px; font-size: 10px; font-weight: 700; color: var(--brand);
  padding: 3px 8px; border-radius: 99px; background: var(--brand-50); display: inline-block;
}

/* 坐席待办 */
.sy-task { margin-top: 13px; padding-top: 13px; border-top: 1px dashed var(--line-2); }
.st-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; margin-bottom: 9px; }
.st-h svg { color: var(--brand); }
.st-i {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; margin-bottom: 7px;
  border-radius: var(--r-m); background: #fff; border: 1px solid var(--line);
}
.st-i:last-child { margin-bottom: 0; }
.st-i span { flex: none; font-size: 11px; font-weight: 700; color: var(--ink-4); width: 74px; }
.st-i b { font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.6; }

/* 系统链路 */
.sy-sys-be { margin-top: 14px; }
.sy-be-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ink-4); margin-bottom: 9px; }
.sy-be-h svg { color: var(--brand); }
.sy-be-list { display: flex; flex-direction: column; gap: 7px; }
.sy-be-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  border-radius: var(--r-m); background: #fff; border: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-3); transition: all .2s ease;
}
.sy-be-item .bi-no {
  width: 19px; height: 19px; border-radius: 6px; flex: none; display: grid; place-items: center;
  background: var(--bg-3); color: var(--ink-4); font-size: 10px; font-weight: 800; font-family: var(--font-num);
}
.sy-be-item.on { border-color: var(--brand-200); background: var(--brand-50); color: var(--brand); font-weight: 700; }
.sy-be-item.on .bi-no { background: var(--brand); color: #fff; }

/* 结果卡 */
.sy-stage-out { padding: 0 18px 18px; }
.sy-out {
  border-radius: var(--r-l); border: 1px solid var(--success-bg);
  background: linear-gradient(180deg,#F3FBF6,#FFFFFF); padding: 16px;
}
.so-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--success); }
.so-h svg { flex: none; }
.so-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 13px; }
@media (max-width: 720px) { .so-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.so-m { padding: 11px 13px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line); }
.so-m span { font-size: 10.5px; color: var(--ink-4); }
.so-m b { display: block; margin-top: 4px; font-size: 15px; font-weight: 800; color: var(--ink); font-family: var(--font-num); }
.so-admin { margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--line-2); }
.so-a-h { font-size: 11px; font-weight: 700; color: var(--ink-4); letter-spacing: .4px; margin-bottom: 9px; }
.so-a { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; }
.so-a-t { font-size: 12px; color: var(--ink-2); line-height: 1.6; }

/* ==========================================================================
   4. 1323 工程
   ========================================================================== */
.sy-eng { display: grid; gap: 14px; }
.sy-eng-one {
  display: flex; align-items: center; gap: 13px; padding: 17px 18px;
  border-radius: var(--r-xl); background: var(--brand-grad); color: #fff;
}
.sy-eng-one .eo-i {
  width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: rgba(255,255,255,.18);
}
.sy-eng-one .eo-t { font-size: 16px; font-weight: 800; }
.sy-eng-one .eo-s { margin-top: 5px; font-size: 11.5px; color: rgba(255,255,255,.82); }
.sy-eng-three {
  background: #fff; border-radius: var(--r-xl); border: 1px solid var(--line);
  box-shadow: var(--sh-1); padding: 17px 18px;
}
.et-label { font-size: 12px; font-weight: 800; color: var(--ink-4); margin-bottom: 12px; }
.et-flow { display: flex; align-items: stretch; gap: 7px; }
.sy-eng-three .et-node {
  flex: 1 1 0; min-width: 0; padding: 14px 12px; border-radius: var(--r-m);
  background: var(--lt-bg); border: 1px solid var(--lt-bd);
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.sy-eng-three .et-i {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: #fff; color: var(--lt);
}
.sy-eng-three .et-node b { font-size: 13px; color: var(--ink); }
.sy-eng-three .et-node span { font-size: 10.5px; color: var(--ink-4); line-height: 1.5; }
.et-ar { color: var(--ink-5); display: grid; place-items: center; flex: none; }
.sy-eng-two { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 900px) { .sy-eng-two { grid-template-columns: minmax(0,1fr); } }
.eg-card { background: #fff; border-radius: var(--r-l); border: 1px solid var(--line); padding: 15px; }
.eg-h { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.eg-h svg { color: var(--brand); flex: none; }
.eg-s { font-size: 11.5px; color: var(--ink-4); line-height: 1.7; }
.eg-powers { display: flex; gap: 7px; flex-wrap: wrap; }
.eg-powers span {
  font-size: 11.5px; font-weight: 700; color: var(--brand);
  padding: 5px 12px; border-radius: 99px; background: var(--brand-50); border: 1px solid var(--brand-100);
}

/* ==========================================================================
   5. 汇聚客户
   ========================================================================== */
.sy-map { background: #fff; border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--sh-1); padding: 17px 18px; margin-bottom: 14px; }
.sy-map-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; margin-bottom: 13px; }
.sy-map-h svg { color: var(--brand); }
.sy-map-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 900px) { .sy-map-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .sy-map-grid { grid-template-columns: minmax(0,1fr); } }
.sy-map-i { padding: 12px 13px; border-radius: var(--r-m); background: var(--lt-bg); border: 1px solid var(--lt-bd); }
.sy-map-i b { font-size: 12.5px; color: var(--ink); }
.sy-map-i span { display: block; margin-top: 5px; font-size: 11px; color: var(--ink-4); line-height: 1.6; }
.sy-conv-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px) { .sy-conv-row { grid-template-columns: minmax(0,1fr); } }
.sy-persona, .sy-pools { background: #fff; border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--sh-1); padding: 16px; }
.sy-persona-h, .sy-pools-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; margin-bottom: 10px; }
.sy-persona-h svg, .sy-pools-h svg { color: var(--brand); }
.sy-persona-s { font-size: 11.5px; color: var(--ink-4); }
.sy-persona-p { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.sy-persona-p span {
  font-size: 11px; padding: 5px 11px; border-radius: 99px;
  background: var(--brand-50); color: var(--brand); border: 1px solid var(--brand-100);
}
.sy-pool {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 8px;
  border-radius: var(--r-m); background: var(--bg-2); border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-2);
}
.sy-pool:last-child { margin-bottom: 0; }
.sy-pool svg { color: var(--brand); flex: none; }

/* ==========================================================================
   6. 洞察客户
   ========================================================================== */
.sy-ins-block { background: #fff; border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--sh-1); padding: 17px 18px; margin-bottom: 14px; }
.sy-ins-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; margin-bottom: 14px; flex-wrap: wrap; }
.sy-ins-h svg { color: var(--brand); flex: none; }
.sy-ins-h .ih-s { font-weight: 500; font-size: 11.5px; color: var(--ink-4); }
.sy-tags { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; }
@media (max-width: 1080px) { .sy-tags { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .sy-tags { grid-template-columns: minmax(0,1fr); } }
.sy-tag-card { padding: 13px; border-radius: var(--r-m); background: var(--lt-bg); border: 1px solid var(--lt-bd); }
.tc-t { font-size: 12.5px; font-weight: 800; color: var(--lt); }
.tc-s { margin-top: 6px; font-size: 11px; color: var(--ink-3); line-height: 1.65; }
.tc-eg { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.tc-eg span {
  font-size: 10px; padding: 3px 8px; border-radius: 6px;
  background: rgba(255,255,255,.85); color: var(--ink-3); border: 1px solid var(--lt-bd);
}
.sy-oneid { display: flex; align-items: stretch; gap: 9px; flex-wrap: wrap; }
.sy-oi-col { flex: 1 1 190px; min-width: 0; padding: 13px; border-radius: var(--r-m); background: var(--bg-2); border: 1px solid var(--line); }
.sy-oi-col.hl { background: var(--brand-50); border-color: var(--brand-100); }
.sy-oi-col .oc-h { font-size: 11px; font-weight: 800; color: var(--ink-4); margin-bottom: 9px; }
.sy-oi-col .oc-i {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  padding: 6px 10px; border-radius: 7px; background: #fff; border: 1px solid var(--line); margin-bottom: 6px;
}
.sy-oi-col .oc-i:last-child { margin-bottom: 0; }
.sy-oi-col.hl .oc-i { border-color: var(--brand-100); color: var(--brand); font-weight: 700; }
.sy-oi-ar { display: grid; place-items: center; color: var(--ink-5); flex: none; }
.sy-timeline { margin-top: 15px; padding-top: 14px; border-top: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: 2px; }
.sy-tl { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; position: relative; }
.sy-tl .tl-tm { flex: none; width: 84px; font-size: 10.5px; font-weight: 700; color: var(--brand); font-family: var(--font-num); }
.sy-tl .tl-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px;
  background: var(--brand); box-shadow: 0 0 0 3px var(--brand-50);
}
.sy-tl .tl-ev { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.sy-tl .tl-meta { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.sy-tl .tl-meta span { font-size: 10.5px; color: var(--ink-4); }
.sy-tl .tl-meta i {
  font-style: normal; font-size: 10px; font-weight: 700; color: var(--blue, #2B6CD4);
  padding: 2px 7px; border-radius: 99px; background: var(--info-bg);
}
.sy-seg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .sy-seg { grid-template-columns: minmax(0,1fr); } }
.sy-seg-grid {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  grid-template-rows: repeat(2, minmax(0,1fr)); gap: 10px; padding: 26px 0 0 30px; min-height: 250px;
}
.sy-seg-grid .sg-y {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%) rotate(-90deg);
  font-size: 10.5px; font-weight: 700; color: var(--ink-4); white-space: nowrap;
}
.sy-seg-grid .sg-x {
  position: absolute; right: 0; bottom: 0; font-size: 10.5px; font-weight: 700; color: var(--ink-4);
}
.sy-quad {
  padding: 13px; border-radius: var(--r-m); background: var(--lt-bg); border: 1px solid var(--lt-bd);
  display: flex; flex-direction: column; justify-content: center;
}
.sy-quad b { font-size: 12.5px; font-weight: 800; color: var(--lt); }
.sy-quad span { margin-top: 5px; font-size: 10.5px; color: var(--ink-4); line-height: 1.55; }
.sy-seg-side { border-radius: var(--r-m); background: var(--bg-2); border: 1px solid var(--line); padding: 14px; }
.ss-h { font-size: 11px; font-weight: 800; color: var(--ink-4); margin-bottom: 9px; }
.ss-i {
  display: inline-block; font-size: 11px; padding: 5px 11px; border-radius: 99px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-3); margin: 0 6px 7px 0;
}
.ss-formula {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 8px;
  font-size: 10.5px; color: var(--ink-2); line-height: 1.65; font-family: var(--font-num);
}
.ss-formula svg { flex: none; margin-top: 2px; color: var(--brand); }
.ss-detail { margin-top: 8px; font-size: 10.5px; color: var(--ink-4); line-height: 1.7; }

/* ==========================================================================
   7. 运营客户
   ========================================================================== */
.sy-op-block { background: #fff; border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--sh-1); padding: 17px 18px; margin-bottom: 14px; }
.sy-op-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; margin-bottom: 14px; }
.sy-op-h svg { color: var(--brand); flex: none; }
.sy-loop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sy-loop-i {
  display: flex; align-items: center; gap: 7px; padding: 9px 13px;
  border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
}
.sy-loop-i .li-no {
  width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 10px; font-weight: 800; font-family: var(--font-num);
}
.li-ar { color: var(--ink-5); display: grid; flex: none; }
.sy-dims { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 11px; }
@media (max-width: 1080px) { .sy-dims { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .sy-dims { grid-template-columns: minmax(0,1fr); } }
.sy-dim { border-radius: var(--r-m); border: 1px solid var(--line); overflow: hidden; }
.sd-h { padding: 9px 12px; background: var(--bg-3); font-size: 12px; font-weight: 800; color: var(--ink-2); }
.sd-items { padding: 9px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.sd-items span { font-size: 10.5px; padding: 6px 9px; border-radius: 6px; background: var(--bg-2); color: var(--ink-3); }
.sy-engines { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 900px) { .sy-engines { grid-template-columns: minmax(0,1fr); } }
.sy-engine {
  display: flex; gap: 11px; align-items: flex-start; padding: 14px;
  border-radius: var(--r-m); background: var(--bg-2); border: 1px solid var(--line);
}
.sy-engine svg { color: var(--brand); flex: none; margin-top: 2px; }
.sy-engine b { font-size: 12.5px; }
.sy-engine span { display: block; margin-top: 5px; font-size: 11px; color: var(--ink-4); line-height: 1.65; }
.sy-matrix { display: grid; gap: 13px; }
.sy-mat { border-radius: var(--r-l); border: 1px solid var(--lt-bd); overflow: hidden; }
.sm-head { padding: 15px; background: var(--lt-bg); border-bottom: 1px solid var(--lt-bd); }
.sm-t { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 800; color: var(--lt); }
.sm-auto {
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 99px;
  background: #fff; color: var(--lt); border: 1px solid var(--lt-bd);
}
.sm-sub { margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.sm-s { margin-top: 5px; font-size: 11px; color: var(--ink-4); line-height: 1.65; }
.sm-groups { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); }
@media (max-width: 900px) { .sm-groups { grid-template-columns: minmax(0,1fr); } }
.sm-group { background: #fff; padding: 12px; }
.sm-group .sg-h { font-size: 11.5px; font-weight: 800; color: var(--lt); margin-bottom: 9px; }
.sm-group .sg-items { display: flex; flex-direction: column; gap: 6px; }
.sm-group .sg-items span {
  font-size: 10.5px; padding: 7px 10px; border-radius: 6px;
  background: var(--bg-2); color: var(--ink-3); line-height: 1.55;
}
.sy-guard { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; }
@media (max-width: 900px) { .sy-guard { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.sy-guard-i { padding: 13px; border-radius: var(--r-m); background: var(--bg-2); border: 1px solid var(--line); }
.sy-guard-i b { font-size: 12px; }
.sy-guard-i span { display: block; margin-top: 5px; font-size: 10.5px; color: var(--ink-4); line-height: 1.65; }

/* ==========================================================================
   8. 现状与对标
   ========================================================================== */
.sy-cur-block { background: #fff; border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--sh-1); padding: 17px 18px; margin-bottom: 14px; }
.sy-cur-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; margin-bottom: 14px; flex-wrap: wrap; }
.sy-cur-h svg { color: var(--brand); flex: none; }
.sy-poolcards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; }
@media (max-width: 900px) { .sy-poolcards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .sy-poolcards { grid-template-columns: minmax(0,1fr); } }
.sy-poolcard { padding: 14px; border-radius: var(--r-m); background: var(--lt-bg); border: 1px solid var(--lt-bd); }
.pc-top { display: flex; align-items: center; gap: 8px; }
.pc-top svg { color: var(--lt); flex: none; }
.pc-v { font-size: 19px; font-weight: 800; color: var(--lt); font-family: var(--font-num); }
.pc-t { margin-top: 8px; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.pc-s { margin-top: 5px; font-size: 11px; color: var(--ink-4); line-height: 1.65; }
.sy-cur-2col { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
@media (max-width: 900px) { .sy-cur-2col { grid-template-columns: minmax(0,1fr); } }
.sy-cur-2col .sy-cur-block { margin-bottom: 0; }
.sy-painlist, .sy-syslist { display: flex; flex-direction: column; gap: 9px; }
.sy-painrow { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: var(--r-m); background: #FFFBF3; border: 1px solid #F2E3C4; }
.sy-painrow .pr-no {
  width: 20px; height: 20px; border-radius: 6px; flex: none; display: grid; place-items: center;
  background: var(--gold); color: #fff; font-size: 10px; font-weight: 800; font-family: var(--font-num);
}
.sy-painrow b { font-size: 12px; color: var(--ink); }
.sy-painrow span { display: block; margin-top: 4px; font-size: 10.5px; color: var(--ink-4); line-height: 1.65; }
.sy-sysrow { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-m); background: var(--bg-2); border: 1px solid var(--line); }
.sy-sysrow b { font-size: 12px; }
.sy-sysrow span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--ink-4); }
.sys-badge { flex: none; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.sys-badge.ok { background: #E9F7EF; color: var(--success); }
.sys-badge.warn { background: var(--gold-50); color: var(--gold); }
.sys-badge.bad { background: var(--brand-50); color: var(--brand); }
.sy-bench { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 900px) { .sy-bench { grid-template-columns: minmax(0,1fr); } }
.sy-bench-card { padding: 15px; border-radius: var(--r-m); background: var(--bg-2); border: 1px solid var(--line); }
.bc-h { font-size: 13.5px; font-weight: 800; }
.bc-s { margin-top: 5px; font-size: 11px; color: var(--ink-4); line-height: 1.6; }
.bc-rows { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: 8px; }
.bc-rows .kv2 b { font-family: var(--font-num); }
.bc-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 11px; font-size: 10.5px; color: var(--ink-4); line-height: 1.65; }
.bc-note svg { flex: none; margin-top: 2px; color: var(--brand); }

/* ==========================================================================
   9. 科技力与组织力
   ========================================================================== */
.sy-tech-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 1080px) { .sy-tech-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .sy-tech-grid { grid-template-columns: minmax(0,1fr); } }
.sy-tech-card { border-radius: var(--r-l); border: 1px solid var(--line); overflow: hidden; background: #fff; }
.tc-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--lt-bg); border-bottom: 1px solid var(--lt-bd); }
.tc-h svg { color: var(--lt); flex: none; }
.tc-h b { font-size: 13px; color: var(--ink); }
.tc-st {
  margin-left: auto; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 99px;
  background: #fff; color: var(--lt); border: 1px solid var(--lt-bd); white-space: nowrap;
}
.sy-tech-card > .tc-s { padding: 12px 14px 0; font-size: 11px; color: var(--ink-4); line-height: 1.7; }
.tc-items { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 14px; }
.tc-items span { font-size: 10.5px; padding: 5px 10px; border-radius: 6px; background: var(--bg-2); color: var(--ink-3); }
.sy-tech-note {
  display: flex; align-items: center; gap: 8px; margin-top: 13px; padding: 12px 15px;
  border-radius: var(--r-m); background: var(--bg-2); border: 1px dashed var(--line-3);
  font-size: 11.5px; color: var(--ink-3);
}
.sy-tech-note svg { color: var(--brand); flex: none; }
.sy-org { margin-top: 16px; background: #fff; border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--sh-1); padding: 17px 18px; }
.sy-org-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; margin-bottom: 10px; }
.sy-org-h svg { color: var(--brand); }
.sy-org-lead { font-size: 11.5px; color: var(--ink-4); line-height: 1.75; margin-bottom: 14px; }
.sy-teams { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 1080px) { .sy-teams { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .sy-teams { grid-template-columns: minmax(0,1fr); } }
.sy-team { padding: 14px; border-radius: var(--r-m); background: var(--bg-2); border: 1px solid var(--line); }
.tm-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; margin-bottom: 8px; }
.tm-h svg { color: var(--brand); flex: none; }
.tm-s { font-size: 10.5px; color: var(--ink-4); line-height: 1.7; }
.tm-roles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.tm-roles span { font-size: 10px; padding: 3px 9px; border-radius: 99px; background: #fff; border: 1px solid var(--line); color: var(--ink-3); }
.tm-kpi { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line-2); font-size: 10.5px; color: var(--brand); font-weight: 700; }
.sy-caps {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px;
  padding: 12px 14px; border-radius: var(--r-m); background: var(--brand-50); border: 1px solid var(--brand-100);
}
.sy-caps svg { color: var(--brand); flex: none; }
.sy-caps .cap-label { font-size: 11px; font-weight: 800; color: var(--brand); }
.sy-caps > span:not(.cap-label) {
  font-size: 10.5px; padding: 4px 10px; border-radius: 99px;
  background: #fff; color: var(--ink-3); border: 1px solid var(--brand-100);
}

/* ==========================================================================
   10. 页脚与窄屏
   ========================================================================== */
.sy-foot {
  padding: 22px 30px 36px; text-align: center;
  font-size: 11.5px; color: var(--ink-4); line-height: 1.9;
  border-top: 1px solid var(--line-2); background: #fff;
}
.sy-foot b { color: var(--ink-3); }

@media (max-width: 720px) {
  .sy-hero { padding: 24px 16px 30px; }
  .sy-hero h1 { font-size: 21px; }
  .sy-body { padding: 18px 14px 36px; }
  .sy-metric { min-width: 114px; padding: 10px 12px; }
  .sy-metric .v { font-size: 20px; }
  .sy-stage-body { padding: 13px; }
  .sy-stage-out { padding: 0 13px 15px; }
  .sy-stage-ctrl { width: 100%; }
  .et-flow { flex-wrap: wrap; }
  .sy-eng-three .et-node { flex: 1 1 120px; }
}