#cpt-toggle {
  position: fixed;
  left: 14px;
  bottom: 18px;
  z-index: 69000;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #9c783a;
  border-radius: 4px;
  background: #160e0b;
  color: #edce7b;
  font: 700 24px Cairo, sans-serif;
  cursor: pointer;
  box-shadow: 0 7px 22px #000;
}
#cpt-toggle:hover,
#cpt-toggle.is-active { color: #fff0ad; border-color: #e1b858; box-shadow: 0 0 18px rgba(207,142,42,.58); }
#cpt-toggle[hidden] { display: none!important; }

#cpt-panel {
  position: fixed;
  z-index: 69010;
  left: 14px;
  top: 84px;
  width: 318px;
  max-height: calc(100vh - 110px);
  overflow: auto;
  display: none;
  border: 1px solid #6c5331;
  border-radius: 4px;
  background: rgba(9,9,9,.97);
  color: #ded8cc;
  box-shadow: 0 18px 50px #000;
  font-family: Cairo, sans-serif;
}
#cpt-panel.is-open { display: block; }
#cpt-panel header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #4b3825; background: #17100c; }
#cpt-panel header strong { display: block; color: #e5c46f; font-size: .85rem; }
#cpt-panel header small { display: block; direction: ltr; color: #8f897e; font: 600 .58rem Consolas, monospace; }
#cpt-panel header button { width: 28px; height: 28px; padding: 0; border: 1px solid #62432d; background: #100b09; color: #d7c7ae; cursor: pointer; }
.cpt-body { padding: 10px; }
#cpt-node-list { width: 100%; min-height: 34px; border: 1px solid #51452f; border-radius: 3px; background: #0d0e0e; color: #ddd2bb; padding: 4px 8px; font: 600 .7rem Cairo, sans-serif; }
#cpt-selected-name { min-height: 29px; margin: 7px 0; padding: 5px 8px; border-right: 2px solid #bd8b3e; background: #12100d; color: #ebcf85; font-size: .7rem; }
.cpt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cpt-grid label { min-width: 0; padding: 5px 6px; border: 1px solid #292824; background: #0b0c0c; }
.cpt-grid label span { display: block; margin-bottom: 3px; color: #9e988d; font-size: .56rem; }
.cpt-grid input { direction: ltr; box-sizing: border-box; width: 100%; height: 27px; border: 1px solid #4a4233; border-radius: 2px; background: #080909; color: #e4d4b6; padding: 2px 5px; font: 700 .68rem Consolas, monospace; }
.cpt-grid input:focus { outline: 1px solid #bd8b3e; border-color: #bd8b3e; }
.cpt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.cpt-actions-primary { grid-template-columns: 1fr 1fr 1fr; margin-top: 10px; }
.cpt-actions button { min-height: 31px; border: 1px solid #4e4638; border-radius: 3px; background: #17130f; color: #d2c4aa; font: 700 .61rem Cairo, sans-serif; cursor: pointer; }
.cpt-actions-primary button { border-color: #76582e; color: #e2bf6b; }
.cpt-actions button:hover:not(:disabled) { border-color: #c89b48; color: #fff0b5; }
.cpt-actions button:disabled { opacity: .35; cursor: default; }
#cpt-status { display: block; min-height: 18px; margin-top: 7px; color: #7fa88a; font-size: .56rem; }

.cpt-map-editing { cursor: crosshair; outline: 1px solid rgba(38,170,211,.8); outline-offset: 3px; }
.cpt-map-editing [data-cave-node] { cursor: move!important; box-sizing: border-box; box-shadow: inset 0 0 0 1px rgba(48,170,216,.88), 0 0 0 1px rgba(0,0,0,.7)!important; }
.cpt-map-editing [data-cave-node].cpt-selected { box-shadow: inset 0 0 0 2px #e0ac42, 0 0 15px rgba(221,153,42,.8)!important; }
.cpt-resize-handle { position: absolute!important; z-index: 30!important; left: -5px!important; bottom: -5px!important; width: 11px!important; height: 11px!important; border: 1px solid #d7b35d!important; border-radius: 1px!important; background: #1689aa!important; cursor: nwse-resize!important; box-shadow: 0 0 0 2px #050606!important; }

.cpt-layout-node .cave-monster-sprite {
  transform: translate(var(--cpt-sprite-x,0),var(--cpt-sprite-y,0)) scale(var(--cpt-sprite-scale,1));
  transform-origin: 50% 80%;
}
.cpt-layout-node.is-hovering .cave-monster-sprite {
  transform: translate(var(--cpt-sprite-x,0),calc(var(--cpt-sprite-y,0px) - 7px)) scale(var(--cpt-sprite-hover-scale,1.12));
}
.cpt-layout-node .node-name,
.cpt-layout-node .node-status {
  transform: translate(var(--cpt-label-x,0),var(--cpt-label-y,0));
}
.cpt-layout-node.is-boss::before { width: var(--cpt-glow-w,82%); height: var(--cpt-glow-h,66%); }
.cpt-layout-node.is-boss::after { width: var(--cpt-glow-inner-w,60%); height: var(--cpt-glow-inner-h,58%); }

@media (max-width: 760px) {
  #cpt-panel { left: 8px; top: 58px; width: min(318px,calc(100vw - 16px)); }
  #cpt-toggle { left: 8px; bottom: 8px; }
}
