:root { --bg:#f2f3f7; --ink:#1f1c1d; --muted:#646b76; --line:#dde0e8; --accent:#23874a; --accent2:#ddf2e4; }
  * { box-sizing: border-box; }
  html, body { margin:0; height:100%; font:14px/1.45 system-ui, -apple-system, Segoe UI, sans-serif; color:var(--ink); background:var(--bg); }
  #app { display:grid; grid-template-columns: minmax(0,1fr) 400px; height:100vh; }
  #mapwrap { position:relative; height:100vh; min-height:300px; background:#eef1ec; }
  #map { position:absolute; inset:0; }
  #loadmsg, #fatal { position:absolute; left:0; right:0; top:0; padding:20px; z-index:5; font-size:14px; }
  #loadmsg { background:#fff8e1; }
  #fatal { background:#fdecea; bottom:0; overflow:auto; white-space:pre-wrap; z-index:10; }
  #diag { position:absolute; left:8px; bottom:26px; z-index:4; font-size:11px; color:#333; background:rgba(255,255,255,.88); padding:2px 6px; border-radius:4px; }
  #panel { overflow-y:auto; padding:16px; border-left:1px solid var(--line); background:#fff; }
  h1 { font-size:18px; margin:0 0 2px; }
  .sub { color:var(--muted); margin:0 0 14px; }
  h2 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:18px 0 8px; }
  .row { display:flex; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
  input[type=text], input[type=number] { flex:1; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; }
  button { padding:8px 11px; border:1px solid var(--line); background:#fff; border-radius:8px; font:inherit; cursor:pointer; }
  button:hover { background:var(--accent2); }
  button.primary { background:var(--accent); color:#fff; border-color:var(--accent); width:100%; padding:11px; font-weight:600; }
  button.primary:disabled { opacity:.5; cursor:default; }
  button.on { background:var(--accent2); border-color:var(--accent); }
  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  label.f { display:block; font-size:12px; color:var(--muted); }
  label.f input { width:100%; margin-top:2px; }
  #status { margin:10px 0; padding:8px 10px; background:var(--accent2); border-radius:8px; min-height:34px; }
  #status.err { background:#fbe9e7; }
  .layers button { flex:1 1 45%; }
  .slider { display:grid; grid-template-columns:48px 1fr; gap:6px; align-items:center; font-size:12px; color:var(--muted); }
  .slider input { width:100%; }
  table { width:100%; border-collapse:collapse; }
  td { padding:5px 0; border-bottom:1px solid var(--line); vertical-align:top; }
  td:last-child { text-align:right; font-weight:600; }
  .note { font-size:12px; color:var(--muted); margin-top:8px; }
  .legend { height:10px; border-radius:5px; margin:6px 0 2px; }
  .pin { width:24px; height:24px; border-radius:50%; border:2px solid #fff; color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.4); }
  @media (max-width:820px) {
    #app { grid-template-columns:minmax(0,1fr); grid-template-rows:55vh auto; height:auto; }
    #mapwrap { height:55vh; }
    #panel { border-left:0; border-top:1px solid var(--line); overflow:visible; }
  }
  .leaflet-container { font: inherit; }
  #map { z-index:0; }
  #scene { position:absolute; inset:0; z-index:6; background:#cfdcec; }
  #sceneCanvas { width:100%; height:100%; display:block; touch-action:none; }
  #sceneBar { position:absolute; left:8px; top:8px; right:8px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; background:rgba(255,255,255,.93); padding:6px 8px; border-radius:8px; font-size:12px; }
  #sceneBar label { display:flex; align-items:center; gap:4px; color:var(--muted); }
  #sceneBar input[type=range] { width:90px; }
  #sceneBar select { padding:6px; border:1px solid var(--line); border-radius:8px; font:inherit; }
  #treeCard { position:absolute; left:10px; top:96px; z-index:5; width:250px; max-height:calc(100% - 190px); overflow:auto; background:rgba(255,255,255,.95); border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.25); padding:8px 10px; font-size:12px; }
  #treeCard .tc-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; font-size:14px; }
  #treeCard .tc-h button { padding:0 7px; }
  #treeCard table { width:100%; border-collapse:collapse; }
  #treeCard td { padding:2px 0; border-top:1px solid var(--line); vertical-align:top; }
  #treeCard td:last-child { text-align:right; font-weight:600; }
  #treeCard select { width:100%; margin-top:2px; padding:4px; border:1px solid var(--line); border-radius:6px; font:inherit; }
  #treeCard .tc-b { display:flex; gap:6px; margin-top:6px; }
  @media (max-width:700px) { #treeCard { width:200px; top:130px; } }
  #camPad { position:absolute; right:10px; bottom:44px; display:flex; gap:10px; align-items:flex-end; }
  #camPad .grp { display:grid; gap:4px; background:rgba(255,255,255,.88); padding:5px; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.2); }
  #camPad .move { grid-template-columns:repeat(3,36px); }
  #camPad .zr { grid-template-columns:repeat(2,36px); }
  #camPad button { width:36px; height:34px; padding:0; font-size:16px; line-height:1; touch-action:none; user-select:none; }
  @media (max-width:700px) { #camHint { display:none; } }
  #camHint { position:absolute; left:10px; bottom:44px; font-size:11px; color:#222; background:rgba(255,255,255,.8); padding:3px 7px; border-radius:6px; max-width:48%; }
  table.trees { width:100%; border-collapse:collapse; font-size:12px; }
  table.trees th { text-align:left; color:var(--muted); font-weight:500; padding:2px 4px; }
  table.trees td { padding:2px 4px; border-top:1px solid var(--line); }
  table.trees select { padding:3px; border:1px solid var(--line); border-radius:6px; font:inherit; max-width:105px; }
  table.trees button { padding:1px 8px; }
  #sceneNote { position:absolute; left:8px; bottom:8px; right:8px; background:rgba(255,255,255,.9); padding:4px 8px; border-radius:6px; font-size:11px; color:#333; }
  #map { z-index:0; }
  #scene { position:absolute; inset:0; z-index:6; background:#cfdcec; }
  #sceneCanvas { width:100%; height:100%; display:block; touch-action:none; }
  #sceneBar { position:absolute; left:8px; top:8px; right:8px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; background:rgba(255,255,255,.93); padding:6px 8px; border-radius:8px; font-size:12px; }
  #sceneBar label { display:flex; align-items:center; gap:4px; color:var(--muted); }
  #sceneBar input[type=range] { width:90px; }
  #sceneBar select { padding:6px; border:1px solid var(--line); border-radius:8px; font:inherit; }
  #sceneNote { position:absolute; left:8px; bottom:8px; right:8px; background:rgba(255,255,255,.9); padding:4px 8px; border-radius:6px; font-size:11px; color:#333; }