* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #1c1e22;
  color: #d8d5ce;
  overflow: hidden;
}
#app { display: flex; height: 100vh; }

#sidebar {
  width: 264px;
  flex: none;
  background: #24262b;
  border-right: 1px solid #34363c;
  padding: 16px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#sidebar h1 { font-size: 15px; font-weight: 650; letter-spacing: 0.02em; }
#sidebar h1 span { display: block; font-size: 11px; font-weight: 400; color: #8f8c84; margin-top: 2px; }
#sidebar h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #8f8c84;
  margin-bottom: 8px;
}
#sidebar section { border-top: 1px solid #303237; padding-top: 12px; }
#sidebar footer { margin-top: auto; border-top: 1px solid #303237; padding-top: 10px; }
#sidebar footer p { font-size: 10.5px; color: #77746c; line-height: 1.5; }

button {
  font: inherit;
  font-size: 12.5px;
  color: #d8d5ce;
  background: #33363d;
  border: 1px solid #43464e;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
button:hover { background: #3d4048; }
button.active { background: #4c5a3f; border-color: #6a7d58; }
button.danger:hover { background: #6b3a34; border-color: #8d4c43; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; }

#project-select, #camera-select {
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  color: #d8d5ce;
  background: #33363d;
  border: 1px solid #43464e;
  border-radius: 6px;
  padding: 6px 8px;
}
button:disabled { opacity: .55; cursor: progress; }
#btn-render-views { display:block; width:100%; padding:8px 10px; border:1px solid #6a7d58; border-radius:6px; background:#46533c; color:#f0f2eb; text-align:center; text-decoration:none; font-size:12.5px; }
#btn-render-views:hover { background:#566747; }
#btn-render-views[hidden] { display:none; }
#camera-select { display:block; margin-top:5px; }
#camera-info, #capture-status { line-height:1.45; }
#ceiling-value { color:#d8d5ce; font-weight:650; }
#btn-proposal { width:100%;margin-bottom:8px;background:#46533c; }

#palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#palette button { text-align: left; line-height: 1.25; padding: 7px 9px; }
#palette button small { display: block; color: #8f8c84; font-size: 10px; }

.check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin-top: 8px; cursor: pointer; }

.field { display: block; font-size: 12px; color: #a8a49b; margin-bottom: 8px; }
.field input[type="date"] {
  display: block;
  width: 100%;
  margin-top: 3px;
  font: inherit;
  font-size: 12.5px;
  color: #d8d5ce;
  background: #33363d;
  border: 1px solid #43464e;
  border-radius: 6px;
  padding: 4px 8px;
  color-scheme: dark;
}
.field input[type="range"] { display: block; width: 100%; margin-top: 5px; accent-color: #8ba86c; }
.field input[type="color"] {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: 3px;
  padding: 2px;
  background: #33363d;
  border: 1px solid #43464e;
  border-radius: 6px;
  cursor: pointer;
}
#surface-panel select {
  display: block;
  width: 100%;
  margin-top: 3px;
  font: inherit;
  font-size: 12.5px;
  color: #d8d5ce;
  background: #33363d;
  border: 1px solid #43464e;
  border-radius: 6px;
  padding: 5px 8px;
}
.field span { color: #d8d5ce; font-weight: 600; margin-left: 4px; }
.hint { font-size: 11px; color: #a8c08a; margin-top: 8px; }

#selection-panel .dims { display: flex; gap: 6px; margin-bottom: 10px; }
#selection-panel .dims label { font-size: 11px; color: #8f8c84; display: flex; align-items: center; gap: 4px; }
#selection-panel input[type="number"] {
  width: 52px;
  font: inherit;
  font-size: 12px;
  color: #d8d5ce;
  background: #1c1e22;
  border: 1px solid #43464e;
  border-radius: 4px;
  padding: 4px 5px;
}

#viewport { flex: 1; position: relative; }
#canvas { display: block; width: 100%; height: 100%; }

#tooltip, #dim-badge {
  position: fixed;
  background: rgba(20, 22, 26, 0.88);
  border: 1px solid #43464e;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11.5px;
  color: #d8d5ce;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}
#dim-badge { background: rgba(40, 54, 34, 0.9); border-color: #5c6e4c; transform: translate(-50%, -100%); }

#compass {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 104px;
  height: 104px;
  pointer-events: none;
  opacity: 0.85;
}
#compass svg { width: 100%; height: 100%; }
#compass .ring { fill: rgba(20, 22, 26, 0.55); stroke: #43464e; stroke-width: 1.5; }
#compass line { stroke-width: 2.5; stroke-linecap: round; }
#compass text { font: 600 11px system-ui, sans-serif; text-anchor: middle; dominant-baseline: middle; }
#cmp-plan line, #cmp-plan path { stroke: #a8a49b; fill: #a8a49b; }
#cmp-plan-label { fill: #a8a49b; }
#cmp-north line, #cmp-north path { stroke: #d06a55; fill: #d06a55; }
#cmp-north-label { fill: #d06a55; }
#cmp-sun line, #cmp-sun path { stroke: #e3c04d; fill: #e3c04d; }
#cmp-sun-label { fill: #e3c04d; }

#freelook-hud {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 22, 26, 0.82);
  border: 1px solid #43464e;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12.5px;
  pointer-events: none;
}