.roof-fs {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; flex-direction: column;
  background: #111;
}
.roof-fs-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 12px; background: #f3efe4; border-bottom: 1px solid #d9cfc3;
  flex: 0 0 auto; color: #10233a;
  font-family: "Bookman Old Style", "Book Antiqua", Palatino, Georgia, serif;
}
.roof-fs-bar input, .roof-fs-bar select, .roof-fs-bar button {
  font: inherit; font-size: 13px;
}
.roof-fs-bar input[type="number"] { width: 64px; padding: 4px 6px; }
.roof-fs-bar button {
  padding: 6px 10px; border: 1px solid #333; background: #fff; color: #10233a; cursor: pointer;
}
.roof-fs-bar button.sun { background: #e59b12; border-color: #c4840c; font-weight: 700; }
.roof-fs-bar #rd-back { font-weight: 700; }
.roof-fs-bar button.on { background: #10233a; color: #fff; }
.roof-fs-bar .count { margin-left: auto; font-weight: 700; }
.roof-fs-bar label { display: inline-flex; align-items: center; gap: 4px; }
.roof-fs-stage { position: relative; flex: 1; min-height: 0; }
.roof-fs-map { height: 100%; cursor: crosshair; }
.roof-fs-house3d {
  position: absolute; inset: 0; z-index: 450;
  background: transparent; pointer-events: none;
}
.roof-fs-house3d canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.roof-fs-stage.orbit-on .roof-fs-map { visibility: hidden; }
.roof-fs-stage.orbit-on .roof-fs-house3d,
.roof-fs-stage.orbit-on .roof-fs-house3d canvas { pointer-events: auto; background: #b9d4ea; }
.roof-fs-stage.edit-roof .roof-fs-house3d,
.roof-fs-stage.edit-roof .roof-fs-house3d canvas { pointer-events: auto; }
.roof-fs-stage.pin-on .roof-fs-house3d { opacity: 0.22; pointer-events: none; }
.roof-fs-stage.pin-on .roof-fs-house3d canvas { pointer-events: none; }
.roof-fs-3dcap {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  background: #10233a; color: #f3efe4; font-size: 12px; font-weight: 700;
  padding: 4px 8px; pointer-events: none;
}
.roof-fs-shot {
  display: none; position: absolute; inset: 0; z-index: 480;
  cursor: crosshair; background: transparent;
}
.roof-fs-stage.shot-on .roof-fs-shot { display: block; }
.roof-fs-shotbox {
  position: absolute; border: 2px solid #e59b12;
  background: rgba(229,155,18,0.16); pointer-events: none;
}
.roof-fs-coach {
  position: absolute; z-index: 600; left: 50%; top: 12px; transform: translateX(-50%);
  background: #e59b12; color: #10233a; padding: 10px 16px; font-weight: 700; font-size: 16px;
  border: 2px solid #10233a; pointer-events: none; max-width: 90%; text-align: center;
}
.roof-fs-compass {
  position: absolute; z-index: 600; top: 12px; right: 12px; width: 110px;
  pointer-events: none; text-align: center;
}
.roof-fs-rose {
  position: relative; width: 88px; height: 88px; margin: 0 auto;
  border-radius: 50%; background: #f3efe4; border: 2px solid #10233a;
}
.roof-fs-rose span { position: absolute; font-size: 12px; font-weight: 700; color: #10233a; }
.roof-fs-rose .n { top: 4px; left: 0; right: 0; color: #9b2c2c; }
.roof-fs-rose .s { bottom: 4px; left: 0; right: 0; }
.roof-fs-rose .e { right: 6px; top: 50%; margin-top: -8px; }
.roof-fs-rose .w { left: 6px; top: 50%; margin-top: -8px; }
.roof-fs-needle {
  position: absolute; left: 50%; top: 14px; width: 0; height: 0; margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 30px solid #e59b12; transform-origin: 50% 30px;
}
.roof-fs-hub {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  margin: -5px 0 0 -5px; border-radius: 50%; background: #10233a;
}
.roof-fs-clabel {
  margin-top: 6px; background: #10233a; color: #f3efe4;
  font-size: 12px; font-weight: 700; padding: 4px 6px;
}
.len-tag {
  background: #e59b12 !important; border: 2px solid #10233a !important;
  color: #10233a; font-weight: 700; font-size: 13px; line-height: 18px;
  text-align: center; padding: 0 5px; white-space: nowrap;
}
.len-tag.ridge {
  background: #f3efe4 !important;
}
.addr-design-btn { margin: 0 0 8px; }