/* Job Workflows graphics — extends ai-receptionist-graphics.css + crm-graphics.css primitives */
.rcg .jchip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;background:rgba(59,124,255,.16);color:#9dbcff}
.rcg .jchip.g{background:rgba(47,143,99,.2);color:#5fcf8f}.rcg .jchip.y{background:rgba(217,147,35,.18);color:#f0b81f}.rcg .jchip.r{background:rgba(224,82,82,.18);color:#ff8a8a}.rcg .jchip.m{background:rgba(255,255,255,.08);color:var(--mute)}
.rcg .jav{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#0b0c0f;flex:none}
/* J1 — live shop dashboard */
.rcg .j1 .hd{position:absolute;left:60px;top:48px;width:680px;display:flex;align-items:center;gap:14px}
.rcg .j1 .hd .k{font-size:12px}.rcg .j1 .hd .live{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:#5fcf8f;font-weight:600}.rcg .j1 .hd .live i{width:8px;height:8px;border-radius:50%;background:#5fcf8f;animation:j1blink 1.6s ease-in-out infinite}
.rcg .j1 .job{left:60px;width:680px;height:78px;padding:0 22px;display:flex;align-items:center;gap:16px}
.rcg .j1 .job .name{font-size:18px}.rcg .j1 .job .sub{font-size:13px;margin-top:2px}
.rcg .j1 .job .pri{width:4px;height:44px;border-radius:2px;flex:none}
.rcg .j1 .own{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute);white-space:nowrap}
.rcg .j1 .tl{width:150px;height:6px;border-radius:3px;background:#2a2f3a;overflow:hidden;flex:none}.rcg .j1 .tl i{display:block;height:100%;border-radius:3px;background:var(--blue)}
.rcg .j1 .r1{top:96px}.rcg .j1 .r2{top:186px}.rcg .j1 .r3{top:276px}.rcg .j1 .r4{top:366px}
.rcg .j1 .r1 .tl i{width:80%;animation:j1p1 8s ease-in-out infinite}.rcg .j1 .r2 .tl i{width:45%;background:#f0b81f;animation:j1p2 8s ease-in-out infinite}.rcg .j1 .r3 .tl i{width:20%;animation:j1p3 8s ease-in-out infinite}.rcg .j1 .r4 .tl i{width:100%;background:#5fcf8f}
.rcg .j1 .r2{animation:j1hold 8s ease-in-out infinite}
.rcg .j1 .alert{left:60px;top:466px;width:680px;padding:18px 22px;display:flex;align-items:center;gap:16px;opacity:0;animation:j1al 8s cubic-bezier(.2,.8,.2,1) infinite}
.rcg .j1 .alert .warn{width:36px;height:36px;border-radius:10px;background:rgba(217,147,35,.2);color:#f0b81f;display:grid;place-items:center;flex:none;font-size:20px;font-weight:800}
.rcg .j1 .alert .t{font-size:18px;font-weight:700;white-space:nowrap}.rcg .j1 .alert .s{font-size:14px;color:var(--mute);margin-top:2px;white-space:nowrap}.rcg .j1 .alert .jchip{margin-left:auto}
@keyframes j1blink{50%{opacity:.3}}
@keyframes j1p1{0%,10%{width:62%}60%,100%{width:84%}}
@keyframes j1p2{0%,100%{width:45%}}
@keyframes j1p3{0%,20%{width:8%}80%,100%{width:34%}}
@keyframes j1hold{0%,38%{box-shadow:none}46%,90%{box-shadow:0 0 0 1.5px rgba(240,184,31,.7)}100%{box-shadow:none}}
@keyframes j1al{0%,40%{opacity:0;transform:translateY(16px)}48%,90%{opacity:1;transform:none}98%,100%{opacity:0}}
/* J2 — kanban drag */
.rcg .j2 .col{top:60px;width:160px;height:480px;padding:16px 12px;display:grid;align-content:start;gap:10px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.rcg .j2 .col .k{font-size:11px;display:flex;justify-content:space-between;margin-bottom:4px}.rcg .j2 .col .k b{color:var(--mute);font-weight:500}
.rcg .j2 .k1{left:60px}.rcg .j2 .k2{left:236px}.rcg .j2 .k3{left:412px}.rcg .j2 .k4{left:588px}
.rcg .j2 .k2{animation:j2tgt 8s ease-in-out infinite}
.rcg .j2 .jc{background:var(--card2);border-radius:12px;padding:12px;display:grid;gap:8px;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.rcg .j2 .jc .n{font-size:14px;font-weight:700;white-space:nowrap}.rcg .j2 .jc .v{font-size:12px;color:var(--mute);white-space:nowrap}
.rcg .j2 .jc .ft{display:flex;align-items:center;justify-content:space-between}
.rcg .j2 .ghost{opacity:0;animation:j2ghost 8s ease-in-out infinite}
.rcg .j2 .drag{position:absolute;left:72px;top:112px;width:136px;background:var(--card2);border-radius:12px;padding:12px;display:grid;gap:8px;box-shadow:0 0 0 1.5px var(--blue),0 20px 40px rgba(0,0,0,.6);animation:j2drag 8s cubic-bezier(.4,0,.2,1) infinite;z-index:3}
.rcg .j2 .drag .n{font-size:14px;font-weight:700;white-space:nowrap}.rcg .j2 .drag .v{font-size:12px;color:var(--mute);white-space:nowrap}.rcg .j2 .drag .ft{display:flex;align-items:center;justify-content:space-between}
.rcg .j2 .drag .jchip.st{animation:j2chip 8s linear infinite}
.rcg .j2 .cur{position:absolute;left:0;top:0;width:22px;height:22px;z-index:4;animation:j2cur 8s cubic-bezier(.4,0,.2,1) infinite}
.rcg .j2 .cur svg{width:22px;height:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.rcg .j2 .toast{left:412px;top:470px;width:336px;padding:14px 18px;display:flex;align-items:center;gap:12px;opacity:0;animation:j2toast 8s ease-out infinite}
.rcg .j2 .toast .chk{width:26px;height:26px;background:var(--green)}.rcg .j2 .toast .t{font-size:14px;font-weight:600;white-space:nowrap}.rcg .j2 .toast .s{font-size:12px;color:var(--mute);white-space:nowrap;margin-top:1px}
@keyframes j2drag{0%,18%{transform:translate(0,0) rotate(0)}26%{transform:translate(20px,-10px) rotate(-2deg)}50%,54%{transform:translate(176px,-6px) rotate(-2deg)}60%,100%{transform:translate(176px,0) rotate(0)}}
@keyframes j2cur{0%,14%{transform:translate(120px,150px);opacity:0}18%{opacity:1}26%{transform:translate(140px,140px)}50%,54%{transform:translate(296px,144px)}62%{transform:translate(310px,170px);opacity:1}70%,100%{transform:translate(330px,200px);opacity:0}}
@keyframes j2ghost{0%,18%{opacity:0}26%,58%{opacity:1}62%,100%{opacity:0}}
@keyframes j2tgt{0%,24%{background:rgba(255,255,255,.03);border-color:var(--line)}30%,56%{background:rgba(59,124,255,.08);border-color:rgba(59,124,255,.5)}62%,100%{background:rgba(255,255,255,.03);border-color:var(--line)}}
@keyframes j2chip{0%,58%{background:rgba(255,255,255,.08);color:var(--mute)}60%,100%{background:rgba(59,124,255,.16);color:#9dbcff}}
@keyframes j2toast{0%,62%{opacity:0;transform:translateY(12px)}70%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
/* J3 — inspection images */
.rcg .j3 .hd{position:absolute;left:60px;top:48px;width:680px;display:flex;align-items:center;gap:14px}.rcg .j3 .hd .k{font-size:12px}.rcg .j3 .hd .cnt{margin-left:auto;font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums}
.rcg .j3 .cp{left:60px;width:680px;padding:18px 22px;display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:20px}
.rcg .j3 .c1{top:92px}.rcg .j3 .c2{top:236px}.rcg .j3 .c3{top:380px}
.rcg .j3 .th{display:flex;gap:6px}.rcg .j3 .th i{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,#2a2f3a,#1c1f26);border:1px solid var(--line);position:relative;overflow:hidden}
.rcg .j3 .th i::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(59,124,255,.35),rgba(126,166,248,.1));opacity:0;transform:scale(.6);border-radius:8px}
.rcg .j3 .th i.on::after{opacity:1;transform:none}
.rcg .j3 .c2 .th i:nth-child(1)::after{animation:j3ph 9s ease-out infinite}.rcg .j3 .c2 .th i:nth-child(2)::after{animation:j3ph2 9s ease-out infinite}.rcg .j3 .c2 .th i:nth-child(3)::after{animation:j3ph3 9s ease-out infinite}
.rcg .j3 .t{font-size:18px;font-weight:700;white-space:nowrap}.rcg .j3 .s{font-size:13px;color:var(--mute);margin-top:3px;white-space:nowrap}
.rcg .j3 .c2 .st{position:relative;width:110px;height:30px}.rcg .j3 .c2 .st .jchip{position:absolute;right:0;top:0}
.rcg .j3 .c2 .st .y{animation:j3y 9s linear infinite}.rcg .j3 .c2 .st .g{opacity:0;animation:j3g 9s linear infinite}
.rcg .j3 .c3{opacity:.45}
.rcg .j3 .flash{position:absolute;left:0;top:0;width:800px;height:600px;background:#fff;opacity:0;pointer-events:none;animation:j3flash 9s linear infinite}
.rcg .j3 .note{left:60px;top:500px;width:680px;padding:14px 22px;display:flex;align-items:center;gap:12px;opacity:0;animation:j3note 9s ease-out infinite}
.rcg .j3 .note .t{font-size:14px;font-weight:600}.rcg .j3 .note .s{font-size:13px;margin:0;color:var(--mute);margin-left:auto}
@keyframes j3ph{0%,12%{opacity:0;transform:scale(.6)}16%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes j3ph2{0%,30%{opacity:0;transform:scale(.6)}34%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes j3ph3{0%,48%{opacity:0;transform:scale(.6)}52%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes j3flash{0%,13%{opacity:0}14%{opacity:.5}17%{opacity:0}31%{opacity:0}32%{opacity:.5}35%{opacity:0}49%{opacity:0}50%{opacity:.5}53%,100%{opacity:0}}
@keyframes j3y{0%,54%{opacity:1}57%,100%{opacity:0}}
@keyframes j3g{0%,56%{opacity:0;transform:translateY(6px)}60%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes j3note{0%,62%{opacity:0;transform:translateY(12px)}70%,94%{opacity:1;transform:none}100%{opacity:0}}
/* J4 — staff portal */
.rcg .j4 .phone{position:absolute;left:270px;top:40px;width:260px;height:520px;border-radius:36px;background:#0e1016;border:6px solid #23272f;box-shadow:0 30px 60px rgba(0,0,0,.6);overflow:hidden;padding:22px 16px}
.rcg .j4 .phone .top{display:flex;align-items:center;gap:10px;margin-bottom:16px}.rcg .j4 .phone .top .name{font-size:16px}.rcg .j4 .phone .top .sub{font-size:12px;margin-top:1px}
.rcg .j4 .phone .k{font-size:10px;margin:10px 0 8px}
.rcg .j4 .ev{border-radius:10px;background:var(--card2);padding:10px 12px;margin-bottom:8px;display:grid;gap:3px;border-left:3px solid var(--blue)}
.rcg .j4 .ev .n{font-size:13px;font-weight:700;white-space:nowrap}.rcg .j4 .ev .v{font-size:11px;color:var(--mute);white-space:nowrap}
.rcg .j4 .ev.g{border-left-color:#5fcf8f}.rcg .j4 .ev.y{border-left-color:#f0b81f}
.rcg .j4 .ev.new{opacity:0;animation:j4new 8s cubic-bezier(.2,.8,.2,1) infinite;box-shadow:0 0 0 1.5px rgba(59,124,255,.6)}
.rcg .j4 .tabs{position:absolute;left:0;right:0;bottom:0;height:56px;background:#141821;display:grid;grid-template-columns:repeat(4,1fr);place-items:center}
.rcg .j4 .tabs i{width:22px;height:22px;border-radius:6px;background:#2a2f3a}.rcg .j4 .tabs i.on{background:var(--blue)}
.rcg .j4 .side{width:200px;padding:16px 18px;display:grid;gap:6px;opacity:0}
.rcg .j4 .side .t{font-size:15px;font-weight:700;white-space:nowrap}.rcg .j4 .side .s{font-size:12px;color:var(--mute);white-space:nowrap}
.rcg .j4 .sa{left:44px;top:110px;animation:j4s1 8s ease-out infinite}.rcg .j4 .sb{left:44px;top:300px;animation:j4s2 8s ease-out infinite}.rcg .j4 .sc{left:556px;top:200px;animation:j4s3 8s ease-out infinite}
.rcg .j4 .msg{left:556px;top:380px;width:200px;padding:14px 16px;display:grid;gap:6px;opacity:0;animation:j4msg 8s cubic-bezier(.2,.8,.2,1) infinite;box-shadow:0 0 0 1.5px rgba(59,124,255,.6)}
.rcg .j4 .msg .who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute)}.rcg .j4 .msg .b{font-size:13px;line-height:1.35}
.rcg .j4 .lock{position:absolute;left:44px;top:470px;width:200px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--mute);line-height:1.3}.rcg .j4 .lock i{width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#9aa0ab;font-size:12px}
@keyframes j4new{0%,28%{opacity:0;transform:translateY(-10px)}36%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes j4msg{0%,56%{opacity:0;transform:translateX(-12px)}64%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes j4s1{0%,4%{opacity:0;transform:translateX(-8px)}10%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes j4s2{0%,10%{opacity:0;transform:translateX(-8px)}16%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes j4s3{0%,16%{opacity:0;transform:translateX(8px)}22%,96%{opacity:1;transform:none}100%{opacity:0}}
/* J5 — pulse board on a TV */
.rcg .j5 .tv{position:absolute;left:60px;top:40px;width:680px;height:420px;border-radius:14px;background:#000;border:8px solid #1a1d24;box-shadow:0 30px 70px rgba(0,0,0,.6);overflow:hidden;padding:20px 22px}
.rcg .j5 .stand{position:absolute;left:340px;top:468px;width:120px;height:14px;background:#1a1d24;border-radius:0 0 10px 10px}
.rcg .j5 .stand::after{content:"";position:absolute;left:-60px;top:14px;width:240px;height:6px;border-radius:3px;background:#1a1d24}
.rcg .j5 .top{display:flex;align-items:center;gap:12px;margin-bottom:16px}.rcg .j5 .top .k{font-size:11px}.rcg .j5 .top .name{font-size:16px}
.rcg .j5 .views{margin-left:auto;display:flex;gap:4px}.rcg .j5 .views span{font-size:11px;font-weight:600;color:var(--mute);padding:4px 8px;border-radius:6px}.rcg .j5 .views span.on{background:rgba(59,124,255,.2);color:#9dbcff}
.rcg .j5 .views .v7{animation:j5v7 9s linear infinite}.rcg .j5 .views .v3{animation:j5v3 9s linear infinite}
.rcg .j5 .days{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;height:300px}
.rcg .j5 .day{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:10px;display:grid;align-content:start;gap:8px}
.rcg .j5 .day .k{font-size:10px;margin-bottom:2px;display:flex;justify-content:space-between}.rcg .j5 .day .k b{color:var(--mute);font-weight:500}
.rcg .j5 .jc{background:var(--card2);border-radius:8px;padding:8px 9px;display:grid;gap:4px}
.rcg .j5 .jc .n{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rcg .j5 .jc .v{font-size:10.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcg .j5 .jc .bar{height:4px;border-radius:2px;background:#2a2f3a;overflow:hidden;margin-top:2px}.rcg .j5 .jc .bar i{display:block;height:100%;background:var(--blue);border-radius:2px}
.rcg .j5 .d5,.rcg .j5 .d4{animation:j5fade 9s linear infinite}.rcg .j5 .d5{animation-name:j5fade5}
.rcg .j5 .jc.mv{animation:j5mv 9s ease-in-out infinite}
.rcg .j5 .ticker{position:absolute;left:22px;right:22px;bottom:14px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--mute)}.rcg .j5 .ticker i{width:6px;height:6px;border-radius:50%;background:#5fcf8f;animation:j1blink 1.6s ease-in-out infinite}
.rcg .j5 .ticker span{position:relative;height:14px;flex:1}.rcg .j5 .ticker span b{position:absolute;left:0;top:0;font-weight:500;white-space:nowrap}
.rcg .j5 .ticker .t1{animation:j5t1 9s linear infinite}.rcg .j5 .ticker .t2{opacity:0;animation:j5t2 9s linear infinite}
.rcg .j5 .lock{position:absolute;left:60px;top:536px;width:680px;justify-content:center;display:flex;align-items:center;gap:8px;font:500 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.rcg .j5 .lock i{width:8px;height:8px;border-radius:50%;background:#5fcf8f}
@keyframes j5v7{0%,30%{background:rgba(59,124,255,.2);color:#9dbcff}36%,100%{background:transparent;color:var(--mute)}}
@keyframes j5v3{0%,30%{background:transparent;color:var(--mute)}36%,100%{background:rgba(59,124,255,.2);color:#9dbcff}}
@keyframes j5fade{0%,30%{opacity:1}36%,100%{opacity:.18}}
@keyframes j5fade5{0%,30%{opacity:1}36%,100%{opacity:.18}}
@keyframes j5mv{0%,58%{transform:none;box-shadow:none}64%,92%{transform:translateY(-4px);box-shadow:0 0 0 1.5px rgba(95,207,143,.7)}100%{transform:none;box-shadow:none}}
@keyframes j5t1{0%,58%{opacity:1}62%,100%{opacity:0}}
@keyframes j5t2{0%,60%{opacity:0}64%,96%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.rcg .j1 .alert,.rcg .j2 .toast,.rcg .j3 .note,.rcg .j4 .ev.new,.rcg .j4 .msg,.rcg .j4 .side{opacity:1;transform:none}.rcg .j2 .drag{transform:translate(176px,0)}.rcg .j2 .cur{opacity:0}}