:root {
  --bg: #f2f6f3;
  --card: #ffffff;
  --ink: #17211c;
  --muted: #627067;
  --line: #d9e4dc;
  --green: #1f5f43;
  --green-2: #2f7b59;
  --green-soft: #e9f4ed;
  --amber: #8a5a00;
  --amber-bg: #fff7dd;
  --red: #a92a2a;
  --red-bg: #fff0f0;
  --blue: #175fa5;
  --shadow: 0 8px 28px rgba(21, 54, 38, .08);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}
button, input { font: inherit; }
.app-header {
  background: linear-gradient(135deg, #164a34, #277451);
  color: #fff;
  padding: calc(18px + env(safe-area-inset-top)) 18px 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.app-header h1 { margin: 2px 0 0; font-size: clamp(2rem, 7vw, 3rem); line-height: 1; }
.eyebrow { font-size: .78rem; font-weight: 700; opacity: .8; text-transform: uppercase; letter-spacing: .08em; }
.subtitle { margin: 7px 0 0; opacity: .9; }
.shell { width: min(980px, calc(100% - 24px)); margin: 18px auto 34px; }
.card, .notice {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 16px;
}
.notice.warning { background: var(--amber-bg); color: #573900; border-color: #efd993; box-shadow: none; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-heading > div { display: flex; align-items: center; gap: 10px; }
.section-heading h2, .compact-card h2 { margin: 0; font-size: 1.15rem; }
.step { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; }
.mini-note, .help, small { color: var(--muted); }
.help { margin: 8px 0 14px; font-size: .93rem; }
.grid { display: grid; gap: 14px; }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: grid; gap: 6px; font-weight: 650; }
.field input {
  width: 100%;
  border: 1px solid #bccbc1;
  border-radius: 12px;
  min-height: 48px;
  padding: 9px 12px;
  background: #fff;
  color: var(--ink);
}
.field input:focus { outline: 3px solid rgba(47,123,89,.16); border-color: var(--green-2); }
.field small { font-weight: 450; line-height: 1.3; }
.field.compact { margin-top: 14px; max-width: 500px; }
.geometry-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 16px; }
.geometry-summary div, .sensor-readout div, .result {
  background: #f6f9f7;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px;
}
.geometry-summary span, .sensor-readout span, .result span { display: block; color: var(--muted); font-size: .78rem; }
.geometry-summary strong, .sensor-readout strong, .result strong { display: block; margin-top: 2px; font-size: 1.05rem; }
.inline-message { min-height: 1.3em; margin-top: 8px; font-size: .9rem; }
.inline-message.error { color: var(--red); font-weight: 700; }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 10px; font-size: .78rem; font-weight: 800; background: rgba(255,255,255,.16); color: inherit; white-space: nowrap; }
.badge.neutral { background: #eef2ef; color: #536057; }
.badge.good { background: var(--green-soft); color: var(--green); }
.badge.warn { background: var(--amber-bg); color: var(--amber); }
.sensor-panel { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.sensor-readout { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.button {
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
.button:disabled { cursor: not-allowed; opacity: .45; }
.button.primary { background: var(--green); color: #fff; }
.button.primary:hover:not(:disabled) { background: #174c35; }
.button.secondary { background: #fff; color: var(--green); border-color: #9db9a8; }
.button.ghost { background: transparent; color: var(--green); border-color: var(--line); }
.button.wide { width: 100%; }
.camera-actions, .export-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.camera-box { position: relative; margin-top: 14px; background: #000; border-radius: 16px; overflow: hidden; }
.camera-box video { display: block; width: 100%; max-height: 76vh; object-fit: contain; }
.camera-guide { position: absolute; inset: 0; pointer-events: none; border: 2px solid rgba(255,255,255,.55); margin: 10px; border-radius: 12px; display: flex; align-items: flex-end; justify-content: center; }
.camera-guide span { margin: 12px; background: rgba(0,0,0,.58); color: #fff; padding: 6px 9px; border-radius: 8px; font-size: .78rem; text-align: center; }
.hidden { display: none !important; }
.empty-photo { border: 2px dashed #bdc9c0; border-radius: 16px; padding: 42px 18px; text-align: center; color: var(--muted); background: #f8faf9; }
.photo-stage { position: relative; width: 100%; max-width: 760px; margin: 0 auto; user-select: none; touch-action: none; background: #111; border-radius: 14px; overflow: hidden; }
.photo-stage img { display: block; width: 100%; height: auto; pointer-events: none; }
.marker {
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: grab;
  touch-action: none;
  z-index: 5;
}
.marker:active { cursor: grabbing; }
.marker::before, .marker::after { content: ""; position: absolute; background: currentColor; box-shadow: 0 0 0 1px rgba(255,255,255,.85); }
.marker::before { left: 4px; right: 4px; top: 21px; height: 2px; }
.marker::after { top: 4px; bottom: 4px; left: 21px; width: 2px; }
.marker span { position: absolute; left: 24px; top: -4px; background: rgba(255,255,255,.94); border: 1px solid currentColor; border-radius: 7px; padding: 2px 5px; font-size: .68rem; font-weight: 900; white-space: nowrap; }
.tree-marker { color: #ffcf2f; }
.pole-marker { color: #4fd3ff; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; color: var(--muted); font-size: .83rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.dot.tree { background: #e1ad00; }
.dot.pole { background: #099cca; }
.result-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin: 14px 0; }
.primary-result { background: var(--green-soft); border-color: #bcdac6; }
.primary-result strong { color: var(--green); font-size: 1.65rem; }
.qc-panel { display: grid; gap: 7px; margin: 12px 0; }
.qc-item { border-radius: 10px; padding: 9px 10px; font-size: .9rem; }
.qc-item.good { background: var(--green-soft); color: #174b34; }
.qc-item.warn { background: var(--amber-bg); color: #684500; }
.qc-item.bad { background: var(--red-bg); color: #7e1f1f; }
.details { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.details summary { cursor: pointer; font-weight: 800; }
.calculation-details { margin-top: 10px; background: #f8faf9; border-radius: 10px; padding: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.export-actions { margin-top: 14px; }
.procedure { margin: 10px 0 0; padding-left: 1.35rem; }
.procedure li + li { margin-top: 7px; }
.app-footer { color: var(--muted); text-align: center; padding: 4px 16px calc(24px + env(safe-area-inset-bottom)); font-size: .8rem; }
@media (max-width: 760px) {
  .app-header { flex-direction: column; }
  .cols-3, .geometry-summary, .result-grid { grid-template-columns: 1fr; }
  .sensor-panel { grid-template-columns: 1fr; }
  .sensor-readout { grid-template-columns: repeat(3,1fr); }
  .shell { width: min(100% - 16px, 980px); margin-top: 10px; }
  .card, .notice { border-radius: 14px; padding: 14px; }
}
@media (max-width: 460px) {
  .sensor-readout { grid-template-columns: 1fr; }
  .camera-actions > *, .export-actions > * { width: 100%; }
  .section-heading { align-items: flex-start; }
}

/* v1.1.0: range-pole distance builder + touch photo workspace */
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.distance-formula {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #f8faf9;
  display: grid;
  gap: 3px;
}
.distance-formula span { color: var(--muted); font-size: .82rem; }
.distance-formula strong { color: var(--green); font-size: 1rem; }
.photo-tools {
  max-width: 760px;
  margin: 0 auto 10px;
  display: grid;
  gap: 8px;
}
.touch-help {
  border: 1px solid #cfe0d4;
  background: var(--green-soft);
  color: #214d37;
  border-radius: 11px;
  padding: 9px 11px;
  font-size: .86rem;
}
.zoom-controls {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
}
.zoom-controls input[type="range"] { width: 100%; }
.zoom-button { min-width: 46px; padding-inline: 12px; font-size: 1.35rem; line-height: 1; }
.zoom-readout { min-width: 58px; text-align: center; color: var(--green); }
.photo-stage {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: contain;
  background: #111;
  border-radius: 14px;
  overflow: hidden;
  cursor: grab;
}
.photo-stage.is-panning { cursor: grabbing; }
.photo-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}
.photo-content img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  -webkit-user-drag: none;
}
.marker {
  --marker-scale: 1;
  transform: translate(-50%, -50%) scale(var(--marker-scale));
  transform-origin: 50% 50%;
  will-change: left, top, transform;
}
@media (max-width: 900px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cols-4 { grid-template-columns: 1fr; }
  .zoom-controls { grid-template-columns: auto minmax(80px, 1fr) auto auto; }
  .zoom-controls #resetView { grid-column: 1 / -1; width: 100%; }
}

/* v1.3.0: sensor slope correction + live camera zoom/lens controls */
.field select {
  width: 100%;
  border: 1px solid #bccbc1;
  border-radius: 12px;
  min-height: 48px;
  padding: 9px 12px;
  background: #fff;
  color: var(--ink);
}
.field select:focus { outline: 3px solid rgba(47,123,89,.16); border-color: var(--green-2); }
.slope-panel {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #cfe0d4;
  border-radius: 14px;
  background: var(--green-soft);
  display: grid;
  gap: 12px;
}
.slope-instructions p { margin: 5px 0 0; color: #355946; font-size: .9rem; }
.slope-controls {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) minmax(200px, 1fr);
  gap: 12px;
  align-items: end;
}
.field.compact-inline { margin: 0; }
.slope-status {
  background: rgba(255,255,255,.72);
  border: 1px solid #cfe0d4;
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 68px;
}
.slope-status span { display:block; color: var(--muted); font-size:.78rem; }
.slope-status strong { display:block; margin-top:4px; font-size:.92rem; }
.geometry-summary-4 { grid-template-columns: repeat(4, 1fr); }
.camera-tools {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(280px, 1.2fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8faf9;
}
.camera-lens-field { align-content:start; }
.live-zoom-block { display:grid; gap:6px; }
.control-label { font-weight:700; }
.live-zoom-controls {
  display:grid;
  grid-template-columns:auto minmax(120px,1fr) auto auto;
  gap:8px;
  align-items:center;
}
.live-zoom-controls input[type="range"] { width:100%; }
.live-zoom-block small { color:var(--muted); line-height:1.3; }
.camera-box { touch-action:none; overscroll-behavior:contain; }
.camera-box video { touch-action:none; }
.result-grid { grid-template-columns: repeat(3,1fr); }
@media (max-width: 900px) {
  .geometry-summary-4 { grid-template-columns: repeat(2, 1fr); }
  .slope-controls { grid-template-columns: 1fr 1fr; }
  .slope-status { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .geometry-summary-4 { grid-template-columns: 1fr; }
  .camera-tools { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .slope-controls { grid-template-columns: 1fr; }
  .slope-status { grid-column:auto; }
  .live-zoom-controls { grid-template-columns:auto minmax(80px,1fr) auto; }
  .live-zoom-controls .zoom-readout { grid-column:1 / -1; justify-self:center; }
}

/* v1.4.0 visible build indicator */
.header-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  align-items:center;
  justify-content:flex-end;
}
.version-prominent{
  font-size:1rem;
  font-weight:800;
  letter-spacing:.02em;
  padding:.6rem .9rem;
  border:2px solid rgba(255,255,255,.45);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.version-prominent.good{
  background:#0f7a45;
  color:#fff;
}
.version-prominent.warn{
  background:#a55b00;
  color:#fff;
}
.version-prominent.bad{
  background:#a32626;
  color:#fff;
}
@media (max-width:720px){
  .header-badges{
    width:100%;
    justify-content:flex-start;
  }
  .version-prominent{
    font-size:.95rem;
  }
}


/* v1.4.0 range-pole inclinometer calibration */
.grid.cols-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.geometry-summary-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.angle-calibration-panel{
  margin-top:1rem;
  padding:1rem;
  border:1px solid #cfe1d6;
  background:#f2f8f4;
  border-radius:16px;
}
.angle-calibration-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;
  gap:.75rem;
  align-items:end;
  margin-top:.75rem;
}
.compact-formula{
  margin-top:.9rem;
}
.camera-center-reticle{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
}
.camera-center-reticle::before,
.camera-center-reticle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(255,255,255,.96);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px rgba(0,0,0,.55);
}
.camera-center-reticle::before{
  width:42px;
  height:2px;
}
.camera-center-reticle::after{
  width:2px;
  height:42px;
}
.camera-center-reticle span{
  position:absolute;
  width:12px;
  height:12px;
  border:2px solid rgba(255,255,255,.98);
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px rgba(0,0,0,.55);
}
@media (max-width:900px){
  .angle-calibration-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:720px){
  .grid.cols-2,
  .geometry-summary-3,
  .angle-calibration-grid{
    grid-template-columns:1fr;
  }
  .angle-calibration-grid .button{
    width:100%;
  }
}


/* v1.4.1 conditional range-pole movement control */
.pole-position-field{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.segmented-control{
  display:flex;
  gap:.35rem;
  padding:.3rem;
  background:#edf4ef;
  border:1px solid #c9dbcf;
  border-radius:14px;
}
.segment{
  flex:1;
  border:0;
  border-radius:10px;
  padding:.75rem .9rem;
  font:inherit;
  font-weight:750;
  background:transparent;
  color:#28483a;
  cursor:pointer;
}
.segment.active{
  background:#176b47;
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.pole-offset-panel{
  margin-top:1rem;
  padding:1rem;
  border:1px solid #d8e5dc;
  border-radius:16px;
  background:#f7faf8;
}
.pole-offset-panel[hidden]{
  display:none !important;
}
.integer-stepper{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:.55rem 0;
}
.integer-stepper .compact{
  min-width:52px;
  width:52px;
  padding:.65rem .5rem;
  font-size:1.25rem;
}
.integer-readout{
  min-width:110px;
  text-align:center;
  padding:.68rem 1rem;
  border:1px solid #b9cec0;
  border-radius:12px;
  background:#fff;
  font-size:1.15rem;
  font-weight:800;
}


/* v1.4.2 live-camera cancel control */
.camera-box{
  position:relative;
}
.camera-cancel{
  position:absolute;
  z-index:12;
  top:max(.75rem, env(safe-area-inset-top));
  left:max(.75rem, env(safe-area-inset-left));
  border:1px solid rgba(255,255,255,.65);
  border-radius:999px;
  padding:.62rem .9rem;
  background:rgba(15,24,20,.80);
  color:#fff;
  font:inherit;
  font-weight:800;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  cursor:pointer;
  touch-action:manipulation;
}
.camera-cancel:active{
  transform:scale(.97);
}

/* v1.4.3 full-screen live camera + bottom shutter + restore/cancel */
body.camera-open {
  overflow: hidden;
  overscroll-behavior: none;
}
.camera-box.camera-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: #000;
  overflow: hidden;
}
.camera-box.camera-fullscreen video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #000;
}
.camera-top-controls {
  position: absolute;
  z-index: 30;
  top: max(.75rem, env(safe-area-inset-top));
  left: max(.75rem, env(safe-area-inset-left));
  right: max(.75rem, env(safe-area-inset-right));
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  pointer-events: none;
}
.camera-overlay-button {
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  padding: .62rem .9rem;
  background: rgba(15,24,20,.80);
  color: #fff;
  font: inherit;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  cursor: pointer;
  touch-action: manipulation;
}
.camera-overlay-button:active { transform: scale(.97); }
.camera-cancel {
  position: static;
  z-index: auto;
  top: auto;
  left: auto;
}
.camera-bottom-controls {
  position: absolute;
  z-index: 32;
  left: 50%;
  bottom: max(1.15rem, calc(env(safe-area-inset-bottom) + .65rem));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  pointer-events: none;
}
.camera-shutter {
  width: 82px;
  height: 82px;
  min-width: 82px;
  min-height: 82px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.96);
  padding: 5px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.25);
  box-shadow: 0 5px 22px rgba(0,0,0,.42);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
.camera-shutter-core {
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #e21b23;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.camera-shutter:active:not(:disabled) .camera-shutter-core { transform: scale(.91); }
.camera-shutter:disabled { opacity: .48; cursor: default; }
.camera-shutter-label {
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 0 2px 5px rgba(0,0,0,.9);
}
.camera-fullscreen .camera-guide {
  border: 0;
  margin: 0;
  padding-bottom: 7rem;
}
.camera-fullscreen .camera-guide span {
  margin-bottom: 1.35rem;
}
@media (max-width: 520px) {
  .camera-overlay-button { padding: .56rem .72rem; font-size: .88rem; }
  .camera-shutter { width: 78px; height: 78px; min-width: 78px; min-height: 78px; }
  .camera-shutter-core { width: 58px; height: 58px; }
}