.office-scene svg{stroke:none;fill:none}
.office-panel{background:#fbfcf8;border:1px solid #e0e5da;border-radius:18px;overflow:hidden;margin-bottom:26px;box-shadow:0 8px 30px #40554005}.office-toolbar{padding:23px 25px 10px;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}.office-toolbar>div{display:flex;gap:10px;align-items:center}.office-toolbar strong{font-size:16px;color:#465646}.office-live-dot{width:8px;height:8px;border-radius:50%;background:#87a078;box-shadow:0 0 0 4px #eaf0e5}.office-occupancy,.office-clock{font-size:11px;color:#899386}.office-occupancy{margin-left:9px}.office-legend{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:9px 25px 16px}.status-pill{font-size:11px;padding:4px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;background:#ebedef;color:#7e868e}.status-pill i{width:5px;height:5px;border-radius:50%;background:currentColor}.status-working{background:#e5efe6;color:#5a8064}.status-idle{background:#e6edf6;color:#758cab}.status-waiting{background:#fbf0d8;color:#ac8947}.status-error{background:#f9e6e1;color:#be786d}.status-unknown{background:#e9eae5;color:#8d9286}.office-hint{font-size:10px;color:#969c8d;margin-left:auto}.office-viewport{overflow:auto;overscroll-behavior-x:contain;background:linear-gradient(#eff2e9,#f4f2e9);scrollbar-width:thin;scrollbar-color:#b7c3b0 #eff2e9}.office-viewport:focus-visible{outline:3px solid #b6bf9f;outline-offset:-3px}.office-scene{width:100%;min-width:850px;aspect-ratio:4/3;position:relative;isolation:isolate}.office-floor{position:absolute;width:100%;height:100%;inset:0}.office-desk{position:absolute;width:18.2%;height:28%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;outline-offset:-10px}.office-desk:focus-visible{outline:3px solid #b5a06e;border-radius:15px}.office-desk:hover .desk-nameplate{box-shadow:0 4px 16px #6c675b40;transform:translateY(-3px)}.office-desk.slot-0,.office-desk.slot-4,.office-desk.slot-8{left:12.5%}.office-desk.slot-1,.office-desk.slot-5,.office-desk.slot-9{left:30.3%}.office-desk.slot-2,.office-desk.slot-6,.office-desk.slot-10{left:56.4%}.office-desk.slot-3,.office-desk.slot-7,.office-desk.slot-11{left:74.2%}.office-desk.slot-0,.office-desk.slot-1,.office-desk.slot-2,.office-desk.slot-3{top:13%}.office-desk.slot-4,.office-desk.slot-5,.office-desk.slot-6,.office-desk.slot-7{top:37%}.office-desk.slot-8,.office-desk.slot-9,.office-desk.slot-10,.office-desk.slot-11{top:61%}.desk-art{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 2px #736f5b0c)}.desk-nameplate{position:absolute;top:71%;left:30%;width:67%;max-width:155px;min-height:30px;transform:rotate(-4deg);border:1px solid #dedcd1;border-bottom:3px solid #d5d5c9;border-radius:4px;background:linear-gradient(white,#f7f6ee);box-shadow:2px 3px 5px #77735e16;padding:4px 5px;line-height:1.3;display:flex;gap:5px;align-items:center;justify-content:center;transition:transform .18s,box-shadow .18s}.desk-nameplate strong{font-size:clamp(10px,1vw,13px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4f5149}.desk-nameplate small{font-size:8px;color:#929783;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.desk-status{position:absolute;left:35%;top:89%;font-size:10px;color:#788d72;letter-spacing:1px}.pose-idle .desk-status{color:#8295b2}.pose-waiting .desk-status{color:#b89a5d}.pose-error .desk-status{color:#c48175}.pose-unknown .desk-status{color:#9ea398}.pose-unknown .office-person{filter:grayscale(1);opacity:.48}.pose-unknown .screen-code{opacity:.25}.pose-vacant{cursor:default}.empty-nameplate{color:#a3a899;font-size:10px;border-style:dashed;background:#eeefe7;box-shadow:none}.office-violation .desk-nameplate{border-color:#df9991;background:#fff0ed}.office-violation .desk-status{color:#c35f51}.desk-warning{position:absolute;top:97%;left:10%;width:100%;font-size:9px;color:#b65547;background:#fff0e9;border-radius:5px;padding:3px;box-shadow:0 2px 6px #b8733e14}.office-floor-label{position:absolute;left:44%;bottom:6%;font-size:9px;letter-spacing:3px;color:#a5aa96}.office-caption{padding:15px 25px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:10px;color:#919986;border-top:1px solid #e5e8df}.office-caption>span:first-child{font-size:11px;color:#7d8e72}.status-roster{background:#fff;border-top:1px solid #e5e8df}.status-roster summary{cursor:pointer;padding:17px 25px;font-size:12px;color:#6d7d66}.status-task{max-width:340px;white-space:pre-wrap;overflow-wrap:anywhere}.status-violation td{background:#fff5f2}.violation-label{font-size:11px;color:#c15345;margin:8px 0}.office-overflow{padding:15px 25px;font-size:12px;color:#8a7557;background:#fff8e9}.office-overflow .btn{margin:5px}.host-snapshot+.host-snapshot{border-top:1px solid #e8ece5}.host-heading{padding:16px 24px;background:#fafbf8;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.host-heading strong{font-size:12px}.host-heading>span{font-size:11px;color:#90998c}.host-empty{font-size:12px;color:#929b8d;padding:25px}.process-text{max-width:340px;overflow-wrap:anywhere;white-space:pre-wrap;font-size:11px}.office-detail dl{margin:20px 0 0}.office-detail dt{font-size:11px;color:#929b89;margin:17px 0 6px}.office-detail dd{margin:0;font-size:13px;color:#52604c;overflow-wrap:anywhere}.office-detail>.rank{margin-left:10px}
.pose-working .typing-left{animation:office-type .3s ease-in-out infinite alternate}.pose-working .typing-right{animation:office-type .35s .1s ease-in-out infinite alternate}.pose-working .screen-code{animation:office-screen 2.5s steps(3) infinite}.pose-working .office-head{animation:office-nod 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}.pose-idle .sleeping-head{animation:office-breathe 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.sleep-bubble{animation:office-sleep 3.2s ease-in-out infinite}.raised-hand{animation:office-wave 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:left bottom}.state-bubble{animation:office-bubble 2.3s ease-in-out infinite}.pose-error .state-bubble{animation:office-error 1s ease-in-out infinite}.office-desk:nth-of-type(3n) .office-head{animation-delay:-1s}.office-desk:nth-of-type(2n) .sleep-bubble{animation-delay:-1.5s}
@keyframes office-type{from{transform:translateY(0)}to{transform:translateY(-3px)}}@keyframes office-screen{0%,100%{opacity:.9}50%{opacity:.4}}@keyframes office-nod{0%,100%{rotate:-1deg}50%{rotate:2deg}}@keyframes office-breathe{0%,100%{scale:1}50%{scale:1.035}}@keyframes office-sleep{0%{opacity:.2;translate:0 4px}60%{opacity:1}100%{opacity:.2;translate:0 -8px}}@keyframes office-wave{0%,100%{rotate:-3deg}50%{rotate:7deg}}@keyframes office-bubble{0%,100%{translate:0 0}50%{translate:0 -5px}}@keyframes office-error{0%,100%{rotate:-4deg}50%{rotate:4deg}}
@media(max-width:900px){.office-hint{width:100%;margin:2px 0 0}.office-occupancy{font-size:10px}.office-clock{font-size:10px}.office-toolbar{padding:20px 18px 10px}.office-legend{padding:8px 18px 14px}.office-caption{padding:13px 18px}.office-scene{min-width:800px}.desk-nameplate strong{font-size:11px}.office-viewport:after{content:'左右滑动，看看另一侧的伙伴 →';display:block;padding:0 18px 13px;font-size:10px;color:#8f9a84;position:sticky;left:0;width:max-content}}@media(max-width:650px){.office-legend{gap:6px}.status-pill{font-size:10px;padding:4px 8px}.office-occupancy{margin-left:0}.office-toolbar>div{gap:8px}.host-heading{padding:15px 18px}.office-caption{font-size:9px}.office-floor-label{font-size:8px}}
#office-popover{position:fixed;inset:0;margin:auto;width:min(430px,calc(100% - 30px));max-height:85vh;padding:0;border:1px solid #dce2d5;border-radius:16px;color:#465444;background:#fffefa;box-shadow:0 18px 90px #33402b30;overflow:auto}#office-popover::backdrop{background:#25311a20}#office-popover .modal-header h2{font-size:16px}
@media(prefers-reduced-motion:reduce){.office-scene *{animation:none!important;transition:none!important}}
.office-panel,.office-viewport,.process-panel{min-width:0;max-width:100%}
.office-toolbar>div{min-width:0;flex-wrap:wrap}
.office-caption>span,.host-heading strong{overflow-wrap:anywhere;min-width:0}
@media(max-width:650px){.office-clock{width:100%}.office-hint{overflow-wrap:anywhere}.status-roster summary{min-height:44px}.office-viewport:after{max-width:100%;white-space:normal}}