:root{
  --blue-600:#1E4FD8; --blue-500:#2E6BFF; --blue-400:#5B8BFF; --cyan-400:#38BDF8;
  --ink:#0F2440; --ink-2:#54657F; --line:#DCE7F8; --white:#FFFFFF; --ok:#2FD66B; --warn:#F5A524;
}
*{margin:0;padding:0;box-sizing:border-box}
/* body{
  font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:linear-gradient(135deg,#F6F9FF,#EAF1FF);
  display:flex;align-items:center;justify-content:center;
  -webkit-font-smoothing:antialiased;
} */
/* ===== 800×400 窗口 ===== */
.mock{width:700px;height:360px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 60px rgba(16,55,140,.14);display:flex;flex-direction:column;overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(180deg,#F6F9FF,#EDF3FF);border-bottom:1px solid var(--line);flex-shrink:0}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:#D5E0F2}
.mock-bar i:nth-child(1){background:#F28B82}
.mock-bar i:nth-child(2){background:#FBD77E}
.mock-bar i:nth-child(3){background:#8FE39A}
.mock-url{margin-left:12px;flex:1;font-size:12px;color:#64789E;background:var(--white);border:1px solid var(--line);border-radius:7px;padding:3px 12px;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.3px;transition:opacity .25s}
.mock-tag{font-size:12px;font-weight:900;color:var(--blue-600);background:rgba(46,107,255,.08);border:1px solid rgba(46,107,255,.22);padding:3px 12px;border-radius:16px;white-space:nowrap;transition:opacity .25s}
.mock-body{flex:1;min-height:0;position:relative}
.panel{display:none}
.panel.active{display:grid;grid-template-columns:1.32fr 1fr;gap:0;height:100%;animation:panelIn .35s ease}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.p-left{padding:14px 18px 12px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.p-right{padding:14px 18px 12px;background:linear-gradient(180deg,#FAFCFF,#F4F8FF);display:flex;flex-direction:column;min-height:0}

/* 入场动画 */
.panel.active .it{opacity:0;animation:itIn .5s ease forwards}
@keyframes itIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel.active .it:nth-child(1){animation-delay:.02s}
.panel.active .it:nth-child(2){animation-delay:.12s}
.panel.active .it:nth-child(3){animation-delay:.22s}
.panel.active .it:nth-child(4){animation-delay:.32s}
.panel.active .it:nth-child(5){animation-delay:.42s}
.panel.active .it:nth-child(6){animation-delay:.52s}
.panel.active .it:nth-child(7){animation-delay:.62s}
.panel.active .it:nth-child(8){animation-delay:.72s}

.side-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:900;color:var(--ink);margin-bottom:9px;flex-shrink:0}
.side-title i{font-style:normal;width:4px;height:13px;border-radius:2px;background:linear-gradient(180deg,var(--blue-600),var(--cyan-400))}
.side-title small{font-weight:500;color:#9AAAC6;font-size:11.5px;margin-left:2px}

/* 01 埋点代码 */
.code-window{background:#0D1830;border-radius:10px;overflow:hidden;box-shadow:0 8px 22px rgba(5,11,23,.25);flex-shrink:0}
.code-bar{display:flex;align-items:center;gap:6px;padding:7px 12px;background:#152242;border-bottom:1px solid rgba(124,166,255,.16)}
.code-bar i{width:9px;height:9px;border-radius:50%;background:#3A4F78}
.code-bar span{font-size:11px;color:#8FA6CE;font-family:ui-monospace,Menlo,Consolas,monospace;margin-left:6px}
.code-body{padding:10px 14px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.7;color:#D6E2F7}
.code-body .ln{display:block;white-space:pre}
.code-body .cm{color:#6B83AD}
.code-body .fn{color:#7DB0FF}
.code-body .st{color:#FFD08A}
.code-body .kw{color:#C792EA}
.code-body .cursor{display:inline-block;width:7px;height:13px;background:var(--cyan-400);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.chan-cards{display:flex;flex-direction:column;gap:7px}
.chan{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:7px 11px;font-size:12.5px;font-weight:700;color:var(--ink)}
.chan .ch-ic{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,rgba(46,107,255,.12),rgba(56,189,248,.12));display:flex;align-items:center;justify-content:center;color:var(--blue-600);flex-shrink:0}
.chan .ch-ic svg{width:15px;height:15px}
.chan .ok{margin-left:auto;font-size:10.5px;font-weight:900;color:var(--ok);display:flex;align-items:center;gap:4px}
.chan .ok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.log-strip{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,rgba(46,107,255,.07),rgba(56,189,248,.07));border:1px solid rgba(46,107,255,.18);border-radius:8px;padding:8px 13px;margin-top:10px;flex-shrink:0}
.log-strip b{font-size:16px;font-weight:900;color:var(--blue-600)}
.log-strip b i{font-style:normal;font-size:11px;font-weight:700;color:var(--ink-2)}
.log-strip span{font-size:12px;color:var(--ink-2)}

/* 02 行为轨迹 */
.timeline{display:flex;flex-direction:column;gap:6px}
.tl{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:6px 11px}
.tl time{font-size:10.5px;font-weight:700;color:var(--blue-600);font-family:ui-monospace,Menlo,Consolas,monospace;width:62px;flex-shrink:0}
.tl b{font-size:12.5px;font-weight:900;color:var(--ink);width:88px;flex-shrink:0}
.tl .pg{font-size:11px;color:var(--ink-2);background:#F0F4FB;border-radius:6px;padding:2px 8px;font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.visitor-card{background:var(--white);border:1px solid var(--line);border-radius:11px;padding:12px}
.v-head{display:flex;align-items:center;gap:10px}
.v-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue-600),var(--cyan-400));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex-shrink:0}
.v-head b{font-size:13.5px;font-weight:900;display:block}
.v-head span{font-size:11px;color:var(--ink-2)}
.v-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.v-meta span{font-size:11px;color:var(--ink-2);background:#F0F4FB;border-radius:6px;padding:2px 9px}
.v-foot{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--ink-2)}
.v-foot b{color:var(--blue-600);font-weight:900}
.p-right .v-meta{margin-top:10px}

/* 03 洞察结果 */
.funnel{display:flex;flex-direction:column;gap:10px}
.fn-row{display:flex;align-items:center;gap:10px}
.fn-row b{font-size:12.5px;font-weight:900;color:var(--ink);width:44px;flex-shrink:0}
.fn-bar{flex:1;height:32px;background:#EEF3FC;border-radius:6px;position:relative;overflow:hidden}
.fn-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;background:linear-gradient(90deg,var(--blue-600),var(--blue-400));animation:growX 1.1s cubic-bezier(.2,.7,.3,1) forwards}
.fn-row:nth-child(2) .fn-bar i{background:linear-gradient(90deg,#4A7CF6,#5B8BFF)}
.fn-row:nth-child(3) .fn-bar i{background:linear-gradient(90deg,#5B8BFF,#7DB0FF)}
.fn-row:nth-child(4) .fn-bar i{background:linear-gradient(90deg,#7DB0FF,#9AC6FF)}
.fn-val{font-size:13px;font-weight:900;color:var(--blue-600);width:52px;text-align:right;flex-shrink:0;font-family:ui-monospace,Menlo,Consolas,monospace}
@keyframes growX{to{width:var(--w)}}
.metric-cards{display:flex;flex-direction:column;gap:9px}
.mc{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:8px 13px}
.mc .mc-l{font-size:11px;color:var(--ink-2);display:flex;justify-content:space-between;align-items:center}
.mc .mc-l i{font-style:normal;font-size:10px;font-weight:900;color:var(--ok)}
.mc .mc-l i.down{color:var(--warn)}
.mc b{display:block;font-size:18px;font-weight:900;color:var(--ink);margin-top:1px;line-height:1.2}
.mc b i{font-style:normal;font-size:11.5px;color:var(--ink-2);font-weight:700}
.spark-box{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:8px 13px;margin-top:9px;flex-shrink:0}
.spark-box .mc-l{font-size:11px;color:var(--ink-2)}
.spark{width:100%;height:46px;display:block;margin-top:3px}
.spark polyline{fill:none;stroke:var(--blue-500);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:460;stroke-dashoffset:460;animation:dash 1.6s .3s ease forwards}
.spark .area{fill:url(#sg);stroke:none;stroke-dasharray:460;stroke-dashoffset:460;animation:dash 1.6s .3s ease forwards}
@keyframes dash{to{stroke-dashoffset:0}}

/* 04 画像列表 */
.profile-table{background:var(--white);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.pt-head{display:grid;grid-template-columns:1.2fr .9fr .8fr 1fr;gap:6px;background:#F0F4FB;padding:8px 12px;font-size:11px;font-weight:900;color:var(--ink-2)}
.pt-row{display:grid;grid-template-columns:1.2fr .9fr .8fr 1fr;gap:6px;padding:7px 12px;font-size:12px;color:var(--ink);border-top:1px solid var(--line);align-items:center}
.pt-row .uid{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--blue-600);font-weight:700}
.lv{display:inline-block;font-size:10.5px;font-weight:900;padding:2px 9px;border-radius:10px}
.lv.high{background:rgba(245,165,36,.14);color:#C77700}
.lv.mid{background:rgba(46,107,255,.1);color:var(--blue-600)}
.lv.low{background:rgba(84,101,127,.1);color:var(--ink-2)}
.freq{display:flex;align-items:center;gap:5px}
.freq i{width:34px;height:5px;border-radius:3px;background:#E6EDFA;position:relative;overflow:hidden;display:inline-block}
.freq i em{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:linear-gradient(90deg,var(--blue-500),var(--cyan-400));animation:growX 1s forwards}
.freq span{font-size:11px;color:var(--ink-2)}
.profile-card{background:var(--white);border:1px solid var(--line);border-radius:11px;padding:13px;margin-top:10px}
.pc-top{display:flex;align-items:center;gap:10px}
.pc-top .v-avatar{background:linear-gradient(135deg,#F5A524,#F7B733)}
.pc-top b{font-size:13.5px;font-weight:900;display:block}
.pc-top span{font-size:11px;color:var(--ink-2)}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.tags span{font-size:11px;font-weight:700;color:var(--blue-600);background:rgba(46,107,255,.08);border:1px solid rgba(46,107,255,.2);padding:2px 9px;border-radius:14px}
.pc-life{margin-top:11px}
.pc-life .mc-l{font-size:11px;color:var(--ink-2);display:flex;justify-content:space-between}
.pc-life .bars{display:flex;gap:4px;height:7px;border-radius:4px;overflow:hidden;margin-top:5px}
.pc-life .bars i{flex:1;background:var(--blue-400);transform:scaleY(0);transform-origin:bottom;animation:growY .7s ease forwards}
.pc-life .bars i:nth-child(2){background:var(--blue-500);animation-delay:.1s}
.pc-life .bars i:nth-child(3){background:var(--blue-600);animation-delay:.2s}
.pc-life .bars i:nth-child(4){background:var(--blue-400);animation-delay:.3s}
.pc-life .bars i:nth-child(5){background:var(--blue-500);animation-delay:.4s}
@keyframes growY{to{transform:scaleY(1)}}

/* 05 运营配置 */
.config-form{background:var(--white);border:1px solid var(--line);border-radius:9px;padding:13px 15px;display:flex;flex-direction:column;gap:11px}
.cf-row{display:flex;align-items:flex-start;gap:12px;font-size:12.5px}
.cf-row label{width:52px;font-weight:900;color:var(--ink-2);font-size:12px;padding-top:4px;flex-shrink:0}
.cf-row .v{flex:1}
.cf-pill{display:inline-block;background:rgba(46,107,255,.08);border:1px solid rgba(46,107,255,.22);color:var(--blue-600);font-weight:700;border-radius:8px;padding:4px 10px;font-size:12px}
.cf-switches{display:flex;gap:8px;flex-wrap:wrap}
.sw{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink);background:#F0F4FB;border-radius:8px;padding:4px 10px}
.sw em{font-style:normal;width:22px;height:12px;border-radius:7px;background:var(--blue-500);position:relative;transition:background .3s}
.sw em::after{content:"";position:absolute;top:1.5px;right:1.5px;width:9px;height:9px;border-radius:50%;background:#fff}
.sw.off em{background:#C9D6EF}
.sw.off em::after{right:auto;left:1.5px}
.exec-box{background:var(--white);border:1px solid var(--line);border-radius:11px;padding:12px 15px;margin-top:10px}
.ex-stat{display:flex;justify-content:space-between;align-items:center}
.ex-stat b{font-size:15px;font-weight:900;color:var(--ink)}
.ex-stat span{font-size:10.5px;font-weight:900;color:var(--ok);background:rgba(47,214,107,.12);padding:3px 10px;border-radius:12px}
.ex-prog{margin-top:9px}
.ex-prog .l{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-2);margin-bottom:4px}
.ex-prog .bar{height:7px;border-radius:5px;background:#EDF2FB;overflow:hidden}
.ex-prog .bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--blue-600),var(--cyan-400));animation:growX 1.4s .2s ease forwards}
.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.ex-grid div{background:#F7FAFF;border:1px solid var(--line);border-radius:8px;padding:7px 10px;text-align:center}
.ex-grid b{display:block;font-size:14.5px;font-weight:900;color:var(--blue-600)}
.ex-grid span{font-size:10.5px;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
}