:root{--primary:#0f766e;--primary-dark:#115e59;--background:#f1f6f5;--line:#d6e4e1;--text:#173532;--accent:#f59e0b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--background);color:var(--text)}
button{font:inherit;cursor:pointer;touch-action:manipulation}
.app-header{height:56px;padding:env(safe-area-inset-top) 14px 0;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:3px solid var(--primary)}
.title-row{display:flex;align-items:center;gap:6px}.badge{padding:3px 7px;border-radius:999px;font-size:11px;background:var(--primary);color:#fff}
.save-state{font-size:12px;color:var(--primary-dark);font-weight:700}.app{height:calc(100% - 56px);display:grid;grid-template-columns:330px 1fr;min-width:0}
.panel{overflow:auto;background:#fff;padding:10px;border-right:2px solid var(--line)}h2{margin:9px 0 7px;font-size:13px}
.button-row{display:flex;gap:6px;flex-wrap:wrap}.button-row button,.part-grid button,.toolbar button{border:2px solid var(--line);border-radius:10px;background:#fff;padding:9px 10px;font-weight:800}
button.active{background:#e4f5f2;border-color:var(--primary);color:var(--primary-dark)}.part-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.card{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fbfdfd}.dimension-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dimension{padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff}.dimension small{display:block;color:#69827e}.dimension b{font-size:17px}
.notice,.help{color:#647d79;font-size:11px;line-height:1.5}.summary{font-weight:800;color:var(--primary-dark)}
.canvas-wrap{position:relative;min-width:0;min-height:0;background:#edf4f2;overflow:hidden}.toolbar{position:absolute;left:10px;top:10px;z-index:5;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 20px)}
.toolbar button{padding:7px 9px;box-shadow:0 2px 7px #0002}.toolbar .danger{color:#b91c1c}
.selection-hint{position:absolute;right:10px;top:10px;z-index:5;background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 9px;font-size:12px;font-weight:800;color:var(--primary-dark);box-shadow:0 2px 7px #0002}
svg{width:100%;height:100%;background:#fff;touch-action:none}#grid line{stroke:#e6efed;stroke-width:1;vector-effect:non-scaling-stroke}
.item .shape{stroke:var(--primary);vector-effect:non-scaling-stroke}.item.selected .shape{stroke:var(--accent)!important}
.hitbox{fill:transparent;stroke:transparent;pointer-events:all}.label{font-size:13px;font-weight:800;fill:#243b38;pointer-events:none}
.selection-box{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:8 6;vector-effect:non-scaling-stroke;pointer-events:none}
.resize-dot{fill:#fff;stroke:var(--accent);stroke-width:3;vector-effect:non-scaling-stroke;pointer-events:none}
.rotate-stem{stroke:var(--accent);stroke-width:2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;pointer-events:none}
.rotate-hit{fill:transparent;stroke:transparent;pointer-events:all;cursor:grab}
.rotate-handle{fill:var(--accent);stroke:#fff;stroke-width:4;vector-effect:non-scaling-stroke;pointer-events:none}
.rotate-symbol{fill:#fff;font-size:20px;font-weight:900;pointer-events:none;dominant-baseline:middle;text-anchor:middle}
@media(max-width:800px){.app-header{height:52px}.app{height:calc(100% - 52px);grid-template-columns:1fr;grid-template-rows:300px 1fr}.panel{padding:8px;border-right:0;border-bottom:2px solid var(--line)}.part-grid{grid-template-columns:repeat(3,1fr)}.selection-hint{top:auto;bottom:10px}}


/* β0.7: 選択・配置の視認性改善 */
.center-mark {
  pointer-events: none;
  opacity: .82;
}
.center-mark line {
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.center-mark circle {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.item.just-added {
  animation: stamp-pop .18s ease-out;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes stamp-pop {
  from { opacity: .45; }
  to   { opacity: 1; }
}
.item.selected .label {
  fill: #9a5b00;
}


/* β0.9: GX直管の受口・挿し口・接続点 */
.pipe-socket {
  fill: #fff;
  stroke: var(--primary);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}
.pipe-spigot {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}
.item.selected .pipe-socket,
.item.selected .pipe-spigot {
  stroke: var(--accent);
}
.connection-point {
  fill: #fff;
  stroke: #2563eb;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.connection-label {
  fill: #2563eb;
  font-size: 10px;
  font-weight: 800;
  pointer-events: none;
  text-anchor: middle;
}