/* 营销自动化演示 · 元气章鱼工作台「营销自动化」模块与企业微信「群聊助手」界面演绎
   与 /mk-demo.js 配套；客户、群名与数字均为虚构数据。配色沿用首页与 /yq-demo.css。 */
.mk{position:relative;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;color:#2F3229;-webkit-font-smoothing:antialiased}
.mk *{box-sizing:border-box}
.mk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mk-win{position:relative;height:470px;border-radius:16px;overflow:hidden;background:#FBFAF6;border:1px solid #DDDFD2;box-shadow:0 30px 60px -34px rgba(47,50,41,.38),0 2px 6px rgba(47,50,41,.04);font-size:12px;line-height:1.55;user-select:none}
.mk[data-size="n"] .mk-win{height:500px;font-size:11.5px}

/* 顶栏 */
.mk-bar{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-bottom:1px solid #E7E8DC;background:#F8F6F0}
.mk-brand{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.mk-brand b{font-family:Newsreader,"Noto Serif SC","Songti SC",SimSun,serif;font-weight:500;font-size:14.5px;letter-spacing:.04em}
.mk-brand i{width:1px;height:12px;background:#CFD2C2}
.mk-brand span{font-size:11px;color:#6B7064}
.mk-mod{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:#fff;border:1px solid #E1E2D6;font-size:11.5px;white-space:nowrap;transition:background .3s,border-color .3s,color .3s}
.mk-mod em{font-style:normal;font-family:Newsreader,Georgia,serif;color:#AD6248}
.mk-mod.is-wecom{background:#1F2A37;border-color:#1F2A37;color:#F4F5F0}
.mk-mod.is-wecom em{color:#8FD0A5}
.mk[data-size="n"] .mk-brand span,.mk[data-size="n"] .mk-brand i{display:none}

/* 页签 */
.mk-tabs{position:relative;display:flex;gap:4px;height:38px;align-items:center;padding:0 12px;border-bottom:1px solid #EDEEE3;background:#FBFAF6;transition:opacity .3s}
.mk-tab{position:relative;z-index:1;padding:5px 11px;border-radius:999px;font-size:11.5px;color:#6B7064;white-space:nowrap;transition:color .3s}
.mk-tab.is-on{color:#2F3229;font-weight:500}
.mk-tabpill{position:absolute;top:6px;height:26px;border-radius:999px;background:#fff;border:1px solid #E1E2D6;box-shadow:0 2px 6px -3px rgba(47,50,41,.2);transition:left .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
.mk-tabs.is-off{opacity:.35}
.mk[data-size="n"] .mk-tab{padding:5px 8px;font-size:11px}

/* 场景 */
.mk-stage{position:absolute;left:0;right:0;top:80px;bottom:30px}
.mk-scene{position:absolute;inset:0;padding:14px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.mk-scene.is-on{opacity:1;transform:none}
.mk-h{font-family:Newsreader,"Noto Serif SC","Songti SC",SimSun,serif;font-weight:500;font-size:15px;line-height:1.4}
.mk-sub{display:block;margin-top:2px;font-size:11px;color:#7B7F72}
.mk-card{background:#fff;border:1px solid #E7E8DC;border-radius:12px}
.mk-pill{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;font-size:10.5px;line-height:1.7;white-space:nowrap}
.mk-pill.c{background:#F3E4DC;color:#9A5540}
.mk-pill.p{background:#E9E4F0;color:#6B5A7B}
.mk-pill.s{background:#E3E9D8;color:#55653F}
.mk-pill.w{background:#F6EBD0;color:#8A6A1E}
.mk-pill.g{background:#E3E9D8;color:#55653F}

/* 01 客户群线索 */
.mk-leads-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px}
.mk-scan{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid #E1E2D6;background:#fff;font-size:11px;color:#5A5E52;white-space:nowrap}
.mk-scan i{width:6px;height:6px;border-radius:50%;background:#7C9A62}
.mk-scan.is-run i{animation:mk-pulse .8s ease-in-out infinite}
.mk-list{display:grid;gap:7px}
.mk-row{display:flex;align-items:center;gap:10px;padding:9px 12px;transition:opacity .45s,transform .5s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s,background .4s}
.mk-row-ic{flex:none;width:28px;height:28px;border-radius:8px;background:#EEF0E4;display:grid;place-items:center;font-size:12px;color:#6D7C60}
.mk-row-t{flex:1;min-width:0}
.mk-row-t b{display:block;font-weight:500;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-row-t small{display:block;font-size:10.5px;color:#8A8E80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-row-plan{font-size:10.5px;color:#7B7F72;white-space:nowrap}
.mk-row.is-new{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-bottom:-7px;border-color:transparent;overflow:hidden;transition:opacity .45s,max-height .5s cubic-bezier(.2,.7,.2,1),padding .5s cubic-bezier(.2,.7,.2,1),margin .5s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s,background .4s}
.mk-row.is-new.is-in{opacity:1;max-height:64px;padding-top:9px;padding-bottom:9px;margin-bottom:0;border-color:#D9B5A6;background:#FFFBF8;box-shadow:0 10px 22px -16px rgba(173,98,72,.55)}
.mk-row.is-new .mk-row-ic{background:#F3E4DC;color:#AD6248}
.mk-row .mk-pill,.mk-row .mk-row-plan{transition:opacity .4s}
.mk-row.is-new .mk-pill,.mk-row.is-new .mk-row-plan{opacity:0}
.mk-row.is-new.is-typed .mk-pill,.mk-row.is-new.is-typed .mk-row-plan{opacity:1}
.mk[data-size="n"] .mk-row-plan{display:none}

/* 02 跟进提案 */
.mk-task{padding:12px 13px}
.mk-task-hd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.mk-task-hd b{font-size:12.5px;font-weight:600}
.mk-task-hd .mk-plan{margin-left:auto;font-size:10.5px;color:#8A8E80;white-space:nowrap}
.mk-todo{margin-top:8px;padding:7px 10px;border-radius:8px;background:#F6F5EE;font-size:11px;color:#5A5E52}
.mk-lbl{margin-top:9px;font-size:10.5px;font-weight:600;color:#5A5E52}
.mk-draft{margin-top:5px;min-height:92px;padding:9px 11px;border-radius:10px;border:1px solid #D9B5A6;background:#fff;font-size:11.5px;line-height:1.7;white-space:pre-wrap}
.mk-draft.is-typing::after,.mk-in-t.is-typing::after{content:'';display:inline-block;width:1px;height:1em;margin-left:1px;vertical-align:-2px;background:#AD6248;animation:mk-blink .9s steps(1) infinite}
.mk-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mk-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;border:1px solid #D8CFC6;background:#fff;font-size:11px;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,transform .15s}
.mk-btn.is-press{transform:scale(.95)}
.mk-btn.pri{background:#AD6248;border-color:#AD6248;color:#F8F6F0}
.mk-btn.is-done{background:#E3E9D8;border-color:#C4D0B1;color:#55653F}
.mk[data-size="n"] .mk-btn.x{display:none}
.mk-note{margin-top:9px;font-size:10.5px;color:#8A8E80}

/* 03 企业微信 · 群聊助手 */
.mk-scene--wecom{padding:0;display:grid;grid-template-columns:1.08fr 1fr}
.mk-chat{display:flex;flex-direction:column;min-width:0;background:#1E1F22;color:#E6E6E3}
.mk-chat-hd{padding:9px 12px;border-bottom:1px solid #2C2D31;font-size:11.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-chat-hd small{display:block;font-weight:400;font-size:10px;color:#8D8F94}
.mk-chat-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:10px 12px;overflow:hidden}
.mk-bub{max-width:92%;padding:7px 10px;border-radius:9px;background:#2B2C30;font-size:11px;line-height:1.6;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .45s cubic-bezier(.2,.7,.2,1)}
.mk-bub.is-in{opacity:1;transform:none}
.mk-bub.me{align-self:flex-end;background:#1D4577}
.mk-bub small{display:block;margin-bottom:2px;font-size:9.5px;color:#8D8F94}
.mk-bub.me small{color:#9EBBE0}
.mk-bub.is-0{display:none}
.mk-in{margin:0 10px 10px;min-height:44px;padding:7px 9px;border-radius:9px;border:1px solid #34363B;background:#232427;font-size:11px;line-height:1.6;display:flex;gap:8px;align-items:flex-end}
.mk-in-t{flex:1;min-width:0;color:#D9DAD6;max-height:54px;overflow:hidden}
.mk-in-t:empty::before{content:attr(data-ph);color:#6F7177}
.mk-in-send{flex:none;padding:2px 9px;border-radius:6px;background:#34363B;color:#8D8F94;font-size:10.5px;transition:background .25s,color .25s,transform .15s}
.mk-in.is-ready .mk-in-send{background:#2B6CB0;color:#fff}
.mk-in-send.is-press{transform:scale(.93)}
.mk-side{min-width:0;padding:11px 12px;background:#fff;border-left:1px solid #E7E8DC;display:flex;flex-direction:column}
.mk-side-tabs{display:flex;gap:10px;padding-bottom:7px;border-bottom:1px solid #EDEEE3;font-size:10.5px;color:#8A8E80;white-space:nowrap;overflow:hidden}
.mk-side-tabs b{color:#2F3229;font-weight:600}
.mk-days{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}
.mk-day{padding:1px 7px;border-radius:6px;border:1px solid #E1E2D6;font-size:10px;color:#7B7F72;white-space:nowrap}
.mk-day.is-on{background:#1F4E8C;border-color:#1F4E8C;color:#fff}
.mk-side-h{margin:9px 0 0;font-size:12px;font-weight:600}
.mk-side-p{margin:4px 0 0;font-size:10.5px;line-height:1.6;color:#6B7064}
.mk-script{margin-top:7px;padding:7px 9px;border-radius:8px;background:#F6F5EE;font-size:10.5px;line-height:1.65;color:#2F3229;flex:1;min-height:0;overflow:hidden}
.mk-side .mk-btns{margin-top:8px}
.mk-side .mk-btn{padding:4px 9px;font-size:10.5px}
.mk-remind{margin-top:7px;padding:5px 9px;border-radius:8px;background:#E3E9D8;color:#55653F;font-size:10.5px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.mk-remind.is-on{opacity:1;transform:none}
.mk[data-size="n"] .mk-scene--wecom{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
.mk[data-size="n"] .mk-chat,.mk[data-size="n"] .mk-side{min-height:0}
.mk[data-size="n"] .mk-side{border-left:0;border-top:1px solid #E7E8DC}
.mk[data-size="n"] .mk-side-p,.mk[data-size="n"] .mk-days{display:none}

/* 04 记忆库 */
.mk-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}
.mk-tile{padding:8px 10px}
.mk-tile small{display:block;font-size:10.5px;color:#7B7F72}
.mk-tile b{display:block;margin-top:2px;font-family:Newsreader,Georgia,serif;font-weight:500;font-size:19px;color:#AD6248;font-variant-numeric:tabular-nums}
.mk-exec{margin-top:8px;padding:9px 12px}
.mk-exec-hd{display:grid;grid-template-columns:1fr 150px 34px;gap:10px;font-size:10px;color:#8A8E80;padding-bottom:5px;border-bottom:1px solid #EDEEE3}
.mk-exec-row{display:grid;grid-template-columns:1fr 150px 34px;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid #F3F3EA;font-size:11px}
.mk-exec-row:last-child{border-bottom:0}
.mk-exec-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-meter{display:flex;height:7px;border-radius:999px;overflow:hidden;background:#EEF0E4}
.mk-meter i{display:block;height:100%;width:0;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.mk-meter i.a{background:#7C9A62}
.mk-meter i.b{background:#D9B36A}
.mk-meter i.c{background:#CFD2C2}
.mk-exec-row em{font-style:normal;text-align:right;color:#55653F;font-variant-numeric:tabular-nums}
.mk-legend{display:flex;gap:10px;font-size:10px;color:#8A8E80}
.mk-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}
.mk-mem-ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.mk[data-size="n"] .mk-tiles{grid-template-columns:repeat(2,1fr)}
.mk[data-size="n"] .mk-exec-hd,.mk[data-size="n"] .mk-exec-row{grid-template-columns:1fr 90px 30px}
.mk[data-size="n"] .mk-exec-row:nth-child(n+5){display:none}
.mk[data-size="n"] .mk-legend,.mk[data-size="n"] .mk-note{display:none}

/* 页脚、提示、光标 */
.mk-foot{position:absolute;left:0;right:0;bottom:0;height:30px;display:flex;align-items:center;gap:7px;padding:0 14px;border-top:1px solid #EDEEE3;background:#F8F6F0;font-size:10.5px;color:#6B7064;white-space:nowrap;overflow:hidden}
.mk-foot i{flex:none;width:6px;height:6px;border-radius:50%;background:#7C9A62}
.mk-foot span{overflow:hidden;text-overflow:ellipsis}
.mk-toast{position:absolute;left:50%;bottom:42px;z-index:5;transform:translate(-50%,10px);padding:6px 13px;border-radius:999px;background:#2F3229;color:#F8F6F0;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .35s,transform .4s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.mk-toast.is-on{opacity:1;transform:translate(-50%,0)}
.mk-cursor{position:absolute;left:0;top:0;z-index:6;width:16px;height:16px;transform:translate(var(--x,300px),var(--y,300px));opacity:0;transition:transform .6s cubic-bezier(.3,.7,.2,1),opacity .3s;pointer-events:none}
.mk-cursor.is-on{opacity:1}
.mk-cursor::before{content:'';position:absolute;left:0;top:0;border-left:11px solid #2F3229;border-bottom:8px solid transparent;border-top:8px solid transparent;transform:rotate(38deg);transform-origin:0 0;filter:drop-shadow(0 1px 1px rgba(255,255,255,.9))}
.mk-win.is-leaving .mk-scene.is-on{opacity:0}

/* 步骤 */
.mk-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.mk-step{position:relative;display:flex;align-items:baseline;gap:7px;padding:9px 2px 0;border:0;border-top:1px solid #DDDFD2;background:none;font:inherit;font-size:12px;color:#6B7064;text-align:left;cursor:pointer;min-height:36px}
.mk-step::before{content:'';position:absolute;left:0;top:-1px;height:1px;width:calc(var(--p,0)*100%);background:#AD6248}
.mk-step em{font-style:normal;font-family:Newsreader,Georgia,serif;font-size:12px;color:#AD6248}
.mk-step[aria-current="step"]{color:#2F3229;font-weight:500}
.mk-step:focus-visible{outline:2px solid #AD6248;outline-offset:3px;border-radius:4px}
.mk-step .s{display:none}
.mk[data-size="n"] .mk-step .l{display:none}
.mk[data-size="n"] .mk-step .s{display:inline}

.mk--instant *,.mk--instant *::before,.mk--instant *::after{transition:none!important;animation:none!important}
.mk--static .mk-cursor{display:none}
@keyframes mk-blink{50%{opacity:0}}
@keyframes mk-pulse{50%{transform:scale(1.9);opacity:.35}}
@media (prefers-reduced-motion:reduce){.mk *{animation:none!important}}