/* widgets.css —— 特殊构件：步骤条/甘特条/手机样机/大屏预览/视频墙/充电桩矩阵/聊天/3D 场景/SVG 动效/响应式
   拆自 legacy/index.single.html.bak <style> 段，规则原样保留，零行为改动 */
.steps{display:flex;flex-wrap:wrap;gap:0}
.stp{flex:1;min-width:110px;text-align:center;position:relative;padding-top:26px;font-size:12.5px;color:#666}
.stp:before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #C9D4CF;z-index:1}
.stp:after{content:"";position:absolute;top:16px;left:calc(-50% + 12px);right:calc(50% + 12px);height:2px;background:#DCE7E2}
.stp:first-child:after{display:none}
.stp.done{color:#0B8A55;font-weight:600}
.stp.done:before{background:#0B8A55;border-color:#0B8A55;box-shadow:0 0 0 3px #E6F7F0}
.stp.done:after{background:#0B8A55}
.stp.cur{color:#C07A12;font-weight:600}
.stp.cur:before{border-color:#F2A93B;background:#FDF3E3;box-shadow:0 0 0 3px #FDF3E3}
/* 甘特条 */
.gantt{overflow-x:auto}
.g-row{display:flex;align-items:center;height:34px;border-bottom:1px solid #F1F5F3;min-width:640px}
.g-row .g-n{width:170px;min-width:170px;font-size:12.5px;color:#333;padding-right:10px}
.g-row .g-track{flex:1;position:relative;height:100%}
.g-bar{position:absolute;top:8px;height:18px;border-radius:5px;font-size:11px;color:#fff;display:flex;align-items:center;padding:0 8px;white-space:nowrap}
.g-scale{display:flex;min-width:640px;font-size:11px;color:#999;border-bottom:1px solid #E5E9E7}
.g-scale .g-n{width:170px;min-width:170px}
.g-scale .g-d{flex:1;text-align:center;padding:4px 0}
/* 手机样机 */
.phone-wrap{display:flex;gap:20px;flex-wrap:wrap}
.phone{width:290px;min-width:290px;height:560px;border:3px solid #2B2F2D;border-radius:36px;background:#fff;padding:14px 12px;position:relative;box-shadow:0 8px 24px rgba(17,17,17,.1)}
.phone .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:110px;height:20px;background:#2B2F2D;border-radius:10px}
.phone .p-scr{margin-top:26px;height:calc(100% - 26px);overflow-y:auto;background:#F7F9F8;border-radius:8px;padding:10px}
.phone .p-t{font-size:13px;font-weight:700;color:#111;text-align:center;margin-bottom:10px}
.p-kpi{background:#fff;border:1px solid #E5E9E7;border-radius:10px;padding:9px 11px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.p-kpi .l{font-size:12px;color:#666}
.p-kpi .v{font-size:15px;font-weight:800;color:#0B8A55}
.p-al{background:#fff;border-left:3px solid #E05A5A;border-radius:6px;padding:7px 10px;margin-bottom:7px;font-size:11.5px;color:#333;border-top:1px solid #F1F5F3;border-right:1px solid #F1F5F3;border-bottom:1px solid #F1F5F3}
.p-al small{display:block;color:#999}
/* 大屏预览 */
.screen-box{aspect-ratio:16/9;background:linear-gradient(160deg,#FFFFFF,#F0F8F4);border:1px solid #D9E8E0;border-radius:12px;padding:14px 18px;display:flex;flex-direction:column;box-shadow:inset 0 0 40px rgba(11,138,85,.05)}
.sc-t{text-align:center;font-size:16px;font-weight:800;color:#0B8A55;letter-spacing:3px;padding-bottom:8px;border-bottom:1px solid #DCE7E2;margin-bottom:10px}
.sc-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:0}
.sc-q{border:1px solid #DCE7E2;border-radius:10px;background:#fff;padding:8px 12px;display:flex;flex-direction:column}
.sc-q .qh{font-size:12px;font-weight:700;color:#333;border-left:3px solid #0B8A55;padding-left:7px;margin-bottom:6px}
.sc-q .qr{display:flex;justify-content:space-between;font-size:11px;color:#666;padding:2.5px 0}
.sc-q .qr b{color:#111}
.sc-bars{display:flex;align-items:flex-end;gap:5px;flex:1;padding-top:4px}
.sc-bars i{flex:1;background:linear-gradient(180deg,#12A468,#0B8A55);border-radius:2px 2px 0 0;min-height:8%}
/* 视频墙 */
.vw{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vw-c{position:relative;aspect-ratio:16/10;border:1px solid #D9E2DE;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#EDF3F0,#DCE8E2);cursor:pointer}
.vw-c:hover{border-color:#0B8A55}
.vw-c .scan{position:absolute;left:0;right:0;height:36%;background:linear-gradient(180deg,transparent,rgba(11,138,85,.10),transparent);animation:scan 4s linear infinite}
@keyframes scan{0%{top:-40%}100%{top:110%}}
.vw-c .cam{position:absolute;top:8px;left:10px;font-size:11px;color:#333;background:rgba(255,255,255,.75);padding:1px 8px;border-radius:8px}
.vw-c .rec{position:absolute;top:8px;right:10px;font-size:11px;color:#C93A3A;display:flex;align-items:center;gap:4px}
.vw-c .rec:before{content:"";width:7px;height:7px;border-radius:50%;background:#E05A5A;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
.vw-c .ts{position:absolute;bottom:8px;left:10px;font-size:11px;color:#555}
.vw-c .obj{position:absolute;border:1.5px solid #0B8A55;border-radius:4px;font-size:10px;color:#0B8A55;background:rgba(230,247,240,.7);padding:0 4px}
/* 充电桩矩阵 */
.piles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.pile{border-radius:10px;padding:10px 6px;text-align:center;font-size:12px;border:1px solid #E5E9E7;background:#fff}
.pile .pi{font-size:18px;font-weight:800}
.pile.free{border-color:#9FD6BC;background:#EAF8F1;color:#0B8A55}
.pile.busy{border-color:#A9CBEC;background:#EAF2FC;color:#2B6CB0}
.pile.fault{border-color:#F0B9B9;background:#FDECEC;color:#C93A3A}
.legend{display:flex;gap:16px;margin-top:12px;font-size:12px;color:#666;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
/* 聊天 */
.chat-wrap{display:flex;gap:14px;height:520px}
.chat-q{width:250px;min-width:250px;border:1px solid #E5E9E7;border-radius:10px;background:#FBFCFC;padding:10px;overflow-y:auto}
.chat-q .qh{font-size:13px;font-weight:700;color:#111;margin:2px 2px 8px}
.chat-q .qi{background:#fff;border:1px solid #E5E9E7;border-radius:8px;padding:8px 10px;font-size:12.5px;color:#333;margin-bottom:8px;cursor:pointer;line-height:1.5}
.chat-q .qi:hover{border-color:#0B8A55;color:#0B8A55}
.chat-m{flex:1;display:flex;flex-direction:column;border:1px solid #E5E9E7;border-radius:10px;background:#fff;min-width:0}
.chat-flow{flex:1;overflow-y:auto;padding:14px}
.msg{display:flex;margin-bottom:12px}
.msg .mav{width:30px;height:30px;min-width:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
.msg.u{justify-content:flex-end}
.msg.u .mav{background:#3D8BFD;order:2;margin-left:8px}
.msg.a .mav{background:#0B8A55;margin-right:8px}
.msg .mb{max-width:75%;background:#F2FAF6;border:1px solid #DCE7E2;border-radius:10px;padding:9px 12px;font-size:13px;color:#333;line-height:1.75}
.msg.u .mb{background:#EDF4FE;border-color:#D4E4FA}
.chat-in{display:flex;gap:8px;padding:10px;border-top:1px solid #EEF2F0}
.chat-in input{flex:1;height:38px;border:1px solid #D9E2DE;border-radius:8px;padding:0 12px;font-size:13px;outline:none;color:#111}
.chat-in input:focus{border-color:#0B8A55}
/* 3D 场景 */
.scene-wrap{display:flex;gap:14px}
.scene-cv{flex:1;min-width:0;background:linear-gradient(180deg,#FBFDFC,#EFF6F2);border:1px solid #D9E8E0;border-radius:10px}
.scene-devs{width:250px;min-width:250px}
.scene-devs .sd{border:1px solid #E5E9E7;border-radius:8px;padding:8px 10px;margin-bottom:7px;font-size:12.5px;color:#333;cursor:pointer;display:flex;align-items:center;gap:8px;background:#fff}
.scene-devs .sd:hover{border-color:#0B8A55}
.scene-devs .sd.on{border-color:#0B8A55;background:#E6F7F0;color:#0B8A55;font-weight:700}
.scene-devs .sd i{width:9px;height:9px;border-radius:50%;background:#0B8A55}
.scene-pop{position:absolute;background:#fff;border:1px solid #0B8A55;border-radius:10px;box-shadow:0 8px 24px rgba(17,17,17,.14);padding:10px 14px;font-size:12px;color:#333;z-index:20;line-height:1.8;min-width:170px;pointer-events:none}
.scene-pop b{color:#0B8A55;font-size:13px}
/* SVG 动效 */
.flowline{stroke-dasharray:7 5;animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-12}}
.pulse{animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (max-width:1100px){.blk.half{flex:1 1 100%}.scene-wrap{flex-direction:column}.scene-devs{width:100%}}