.interactive-post.service-room{display:block;padding:0;background:#171519}
.post-stage,.post-markers{position:absolute;inset:0 0 108px}
.post-stage{display:grid;place-items:center;color:#ffd38a}
.post-stage canvas{display:block;width:100%;height:100%;touch-action:none}
.post-markers{pointer-events:none}
.interactive-post .post-marker{
  position:absolute;translate:-50% -50%;display:grid;place-items:center;width:39px;height:39px;padding:0;
  border-radius:50%;border:1px solid #76d9ff;color:#d7f6ff;background:#101820e6;pointer-events:auto;
  box-shadow:0 0 12px #49c6ff55
}
.post-marker[hidden]{display:none!important}
.interactive-post .post-marker[data-state=selected]{border-color:#ffc558;color:#ffc558;box-shadow:0 0 17px #ffba55a0}
.interactive-post .post-marker[data-state=damaged]{border-color:#ff7766;color:#ffb4aa}
.interactive-post .post-marker[data-state=missing]{border-color:#75e6a3;color:#b8ffd1}
.post-title,.post-left,.post-panel,.post-footer,.post-status{position:absolute;z-index:2}
.post-title{top:12px;left:16px;display:flex;align-items:center;gap:12px}
.post-title h1{margin:0;font-size:clamp(20px,2.4vw,42px);text-shadow:0 2px 14px #000}
.post-title a{background:#151619e8;border:1px solid #ffffff40;border-radius:10px;font-size:1.45em;padding:.15em .45em;color:#fff}
.post-left{top:clamp(53px,5.3vw,94px);left:16px;width:clamp(158px,21vw,335px);pointer-events:none}
.post-stats,.post-panel,.post-systems[open]{background:linear-gradient(140deg,#1c1d1deF,#0b0d10ef);border:1px solid #a67e40b0;border-radius:12px;box-shadow:0 8px 22px #0005}
.post-stats{padding:.65em .8em;pointer-events:auto}
.post-stats summary,.post-systems summary{cursor:pointer;font-weight:800}
.post-stats p{color:#c9c7c3;margin:.45em 0}
.post-stats dl,.post-panel dl{margin:.45em 0;display:grid;gap:.3em}
.post-stats dl div,.post-panel dl div{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #ffffff19;padding-top:.25em}
.post-stats dd,.post-panel dd{margin:0;font-weight:800}
.interactive-post meter{--meter:#ffc247}
.post-camera{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;width:min(100%,210px);margin-top:7px;pointer-events:auto}
.post-camera button,.post-camera select{min-height:36px;font-size:.88em}
.post-panel{right:15px;top:14px;bottom:auto;width:clamp(210px,24vw,380px);max-height:calc(100% - 150px);overflow:auto;padding:12px 14px}
.post-panel[hidden]{display:none}
.post-panel h2{margin:0 24px .55em 0;font-size:clamp(17px,1.55vw,29px);color:#ffdc9d}
.post-panel p{margin:.5em 0;color:#d7d4d1}
.post-panel button:not(.post-close),.post-panel select{display:block;width:100%;min-height:34px;margin:.35em 0}
.post-panel .post-close{position:absolute;right:6px;top:6px;padding:.1em .5em}
.post-panel .style-editor{display:block;min-height:0}
.post-panel .style-palette,.post-panel .style-decals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.post-panel .style-palette button,.post-panel .style-decals button{min-width:0}
.post-panel [data-loosen]{touch-action:none;user-select:none}
.post-panel progress{width:100%;accent-color:#ffc247}
.post-status{left:16px;bottom:112px;margin:0;color:#ffe0aa;pointer-events:none;background:#141318c9;border-radius:6px;padding:4px 8px}
.post-status:empty{display:none}
.interactive-post .post-footer{inset:auto 12px 9px;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;overflow:visible}
.post-panel .style-preview-wrap[hidden]{display:none}
.post-systems,.post-modes{min-width:0}
.post-systems summary{display:none}
.post-systems nav,.post-modes{display:flex;overflow-x:auto;gap:6px;scrollbar-width:thin}
.post-systems nav{justify-content:safe center;padding:4px}
.post-modes{background:#141416d9;border:1px solid #ffffff32;border-radius:11px;padding:4px}
.interactive-post .post-footer button{display:flex;align-items:center;justify-content:center;gap:.35em;flex:1 0 auto;white-space:nowrap;
  padding:.42em .55em;min-height:37px;font-size:clamp(12px,1.1vw,19px);border-radius:8px;background:linear-gradient(#28282a,#111214);color:#eee;border-color:#ffffff32}
.interactive-post .post-footer button[aria-pressed=true]{border-color:#ffca5a;background:linear-gradient(#302512,#503107);color:#ffda80;box-shadow:inset 0 0 12px #ffaf3735,0 0 9px #ffa73460}
.post-working canvas{animation:post-service-flash .55s ease}
@keyframes post-service-flash{40%{filter:brightness(1.21)}}
@media(max-height:550px) and (orientation:landscape){
  .post-stage,.post-markers{bottom:48px}
  .post-title{top:5px;left:8px;gap:7px}.post-title h1{font-size:18px}
  .post-left{top:39px;left:8px;width:145px}.post-stats{padding:.35em .5em}
  .post-camera{display:flex;flex-wrap:wrap}.post-camera button,.post-camera select{min-height:31px}
  .post-camera button span{display:none}
  .post-panel{top:7px;right:7px;max-height:calc(100% - 56px);width:clamp(183px,28vw,265px);padding:8px}
  .post-panel h2{font-size:16px}
  .post-panel button:not(.post-close){min-height:34px}
  .interactive-post .post-footer{inset:auto 6px 3px;gap:3px}
  .post-systems{position:absolute;bottom:45px;left:0;max-width:100%;padding:3px;background:#18191be8;border-radius:6px}
  .post-systems summary{display:list-item;padding:4px 6px;font-size:12px}
  .post-systems nav{max-width:calc(100vw - 30px);justify-content:start}
  .post-modes{padding:2px;gap:3px}
  .interactive-post .post-footer button{min-height:34px;font-size:11px}
  .post-status{left:auto;right:10px;bottom:52px;max-width:45%}
  .interactive-post .post-marker{width:35px;height:35px}
}
@media(prefers-reduced-motion:reduce){.post-working canvas{animation:none}}
body.no-motion .post-working canvas{animation:none}

.post-grip-cue{
  position:absolute;z-index:1;translate:-50% -50%;pointer-events:none;
  min-width:42px;text-align:center;padding:4px 8px;border-radius:20px;
  color:#ffe4a5;background:#1a140de8;border:1px solid #ffc558;
  box-shadow:0 0 12px #ffa92b88;font-weight:800
}
.post-grip-cue[hidden]{display:none}

.interactive-post,.post-stage canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.interactive-post :is(input,textarea){-webkit-user-select:text;user-select:text}
.interactive-post .post-panel .style-palette{display:flex;flex-wrap:wrap;gap:6px}
.interactive-post .post-panel .style-palette button{flex:none;width:32px;height:32px;min-height:32px;padding:3px;margin:0;border-radius:50%}
.interactive-post .style-palette button[aria-pressed=true]{border-color:#ffc558}
.style-placement-controls,.style-rgb{display:grid;gap:.4em;grid-template-columns:repeat(2,minmax(0,1fr))}
.style-rgb{grid-template-columns:repeat(3,minmax(0,1fr))}
.style-rgb input,.style-upload input{width:100%;min-width:0}
.style-custom-color,.style-upload{display:block;margin:.6em 0}

/* Styling leaves the workshop view unobstructed. The preview keeps only its actions. */
.interactive-post.post-styling :is(.post-left,.post-footer,.post-markers){display:none}
.interactive-post.post-styling .post-stage{bottom:0}
.interactive-post.post-styling .post-panel{max-height:calc(100% - 28px)}
.interactive-post.post-styling .post-status{bottom:8px}
.interactive-post.post-style-preview .post-title{display:none}
.interactive-post.post-style-preview .post-panel{
  top:auto;bottom:12px;right:12px;width:max-content;max-width:calc(100% - 24px);padding:6px 10px
}
.post-style-preview .post-panel :is(.post-close,h2,.style-fields){display:none}
.post-style-preview .style-command{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.post-style-preview .post-panel .style-command button{width:auto;margin:0;padding:6px 10px}
.post-style-preview .style-note:empty{display:none}
.interactive-post .post-modes [hidden]{display:none}