@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap');

  :root{
    --bg: #0a0f0a;
    --panel: #10160f;
    --panel-line: #263326;
    --contour: #7a8f5c;
    --amber: #d99a1f;
    --signal: #e8543a;
    --ink: #e7e6da;
    --ink-dim: #8fa08a;
    --mono: 'JetBrains Mono', monospace;
    --sans: 'Inter', sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%; overflow:hidden; background:var(--bg); font-family:var(--sans); color:var(--ink);}
  #map{position:absolute; inset:0; cursor:default;}
  #map.pin-mode{cursor:crosshair;}
  #map.measure-mode{cursor:cell;}
  #map.slope-mode{cursor:crosshair;}
  #map.area-mode{cursor:crosshair;}

  .contour-corner{
    position:absolute; top:0; left:0; width:180px; height:180px;
    pointer-events:none; opacity:.35; z-index:5;
  }
  .contour-corner svg{width:100%; height:100%;}

  header{
    position:absolute; top:0; left:0; right:0; z-index:10;
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px; background:linear-gradient(180deg, rgba(10,15,10,.92), rgba(10,15,10,0));
    pointer-events:none;
  }
  header .brand{display:flex; align-items:baseline; gap:8px; pointer-events:auto;}
  header .brand .mark{
    font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.14em;
    color:var(--bg); background:var(--amber); padding:3px 7px; border-radius:2px;
  }
  header .brand h1{font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--ink);}
  header .brand small{display:block; font-family:var(--mono); font-size:10px; color:var(--ink-dim); letter-spacing:.05em;}
  #coords{
    font-family:var(--mono); font-size:11px; color:var(--contour); text-align:right;
    pointer-events:auto; line-height:1.5; cursor:pointer;
  }
  #coords b{color:var(--ink);}

  #layerbar{
    position:absolute; bottom:20px; left:16px; z-index:10;
    display:flex; flex-direction:column; gap:6px;
    background:var(--panel); border:1px solid var(--panel-line); border-radius:8px;
    padding:6px; box-shadow:0 8px 24px rgba(0,0,0,.4);
  }
  #layerbar button{
    font-family:var(--sans); font-size:12px; font-weight:500; color:var(--ink-dim);
    background:transparent; border:1px solid transparent; border-radius:6px;
    padding:8px 12px; text-align:left; cursor:pointer; transition:.15s;
    display:flex; align-items:center; gap:8px; white-space:nowrap;
  }
  #layerbar button .dot{width:7px; height:7px; border-radius:50%; background:var(--panel-line); flex-shrink:0;}
  #layerbar button.active{color:var(--ink); background:#1a2318; border-color:var(--panel-line);}
  #layerbar button.active .dot{background:var(--amber);}
  #layerbar button:hover{color:var(--ink);}

  #download-panel{
    position:absolute; bottom:20px; right:16px; z-index:10;
    background:var(--panel); border:1px solid var(--panel-line); border-radius:8px;
    padding:14px; width:230px; box-shadow:0 8px 24px rgba(0,0,0,.4);
  }
  #download-panel .label{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-dim); margin-bottom:8px; text-transform:uppercase;}
  #download-panel .stat{font-family:var(--mono); font-size:12px; color:var(--ink); margin-bottom:2px;}
  #download-btn{
    width:100%; margin-top:10px; padding:10px; border:none; border-radius:6px;
    background:var(--amber); color:#1a1305; font-weight:700; font-size:12.5px;
    cursor:pointer; font-family:var(--sans); letter-spacing:.01em; transition:.15s;
  }
  #download-btn:hover{filter:brightness(1.08);}
  #download-btn:disabled{background:var(--panel-line); color:var(--ink-dim); cursor:default;}
  #progress-wrap{height:4px; background:#1a2318; border-radius:2px; margin-top:10px; overflow:hidden; display:none;}
  #progress-bar{height:100%; width:0%; background:var(--amber); transition:width .2s;}
  #export-png-btn, #export-pdf-btn{
    width:100%; padding:9px; border:1px solid var(--panel-line); border-radius:6px;
    background:transparent; color:var(--ink); font-weight:600; font-size:11.5px;
    cursor:pointer; font-family:var(--sans); transition:.15s; margin-top:8px;
  }
  #export-png-btn:hover, #export-pdf-btn:hover{background:#1a2318;}

  #status{
    font-family:var(--mono); font-size:9.5px; margin-top:4px;
    display:flex; align-items:center; gap:5px; color:var(--ink-dim);
  }
  #status .led{width:6px; height:6px; border-radius:50%; background:var(--signal); flex-shrink:0;}
  #status.online .led{background:#5fb85f;}

  #toolbar{
    position:absolute; top:180px; right:16px; z-index:10;
    display:flex; flex-direction:column; gap:6px;
  }
  .tool-btn{
    width:44px; height:44px; border-radius:8px; border:1px solid var(--panel-line);
    background:var(--panel); color:var(--ink); cursor:pointer; font-size:17px;
    display:flex; align-items:center; justify-content:center; transition:.15s; position:relative;
  }
  .mesh-dot{
    display:none; width:8px; height:8px; border-radius:50%; background:#5fb85f;
    box-shadow:0 0 4px rgba(95,184,95,.8); flex-shrink:0; margin-left:6px;
  }
  .mesh-dot.on{ display:inline-block; }
  .menu-dot{ position:absolute; top:6px; right:6px; margin-left:0; }
  .menu-dot.on{ display:block; }
  .tool-btn:active{background:#1a2318;}
  .tool-btn.active{background:var(--amber); color:#1a1305; border-color:var(--amber);}

  #tools-menu{
    position:absolute; top:232px; right:16px; z-index:11;
    background:var(--panel); border:1px solid var(--panel-line); border-radius:8px;
    padding:8px; width:212px; box-shadow:0 8px 24px rgba(0,0,0,.5); display:none; flex-direction:column; gap:2px;
    max-height:60vh; overflow-y:auto;
  }
  #tools-menu .tm-label{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-dim); text-transform:uppercase; padding:4px 8px 8px; }
  .tm-item{
    display:flex; align-items:center; gap:10px; padding:13px 8px; border-radius:6px; border:1px solid transparent;
    background:transparent; color:var(--ink-dim); font-family:var(--sans); font-size:12.5px; font-weight:500; cursor:pointer; text-align:left; transition:.15s; width:100%;
  }
  .tm-item .tm-ic{ font-size:15px; width:18px; text-align:center; flex-shrink:0; }
  .tm-item:hover{ color:var(--ink); background:#161f14; }
  .tm-item.active{ color:var(--ink); background:#1a2318; border-color:var(--panel-line); }

  #regions-panel, #settings-panel, #help-panel, #about-panel{
    position:absolute; top:232px; right:16px; z-index:11;
    background:var(--panel); border:1px solid var(--panel-line); border-radius:8px;
    padding:14px; width:270px; box-shadow:0 8px 24px rgba(0,0,0,.5); display:none; max-height:60vh; overflow-y:auto;
  }
  #regions-panel .label, #settings-panel .label, #help-panel .label, #about-panel .label{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-dim); text-transform:uppercase; margin-bottom:4px;}
  #help-panel{ width:280px; }
  #help-steps{ list-style:none; counter-reset:help-counter; margin-top:10px; }
  #help-steps li{
    counter-increment:help-counter; position:relative; padding:8px 0 8px 28px;
    border-top:1px solid var(--panel-line); font-size:12px; line-height:1.5; color:var(--ink-dim);
  }
  #help-steps li:first-child{ border-top:none; }
  #help-steps li::before{
    content:counter(help-counter); position:absolute; left:0; top:8px;
    width:19px; height:19px; border-radius:50%; background:var(--amber); color:#1a1305;
    font-family:var(--mono); font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
  }
  #help-steps li b{ color:var(--ink); display:block; font-size:12.5px; margin-bottom:2px; }
  #help-close{
    width:100%; margin-top:12px; padding:9px; border:none; border-radius:6px;
    background:var(--amber); color:#1a1305; font-weight:700; font-size:12.5px; cursor:pointer;
  }
  .about-app{ font-family:var(--mono); font-size:16px; font-weight:700; color:var(--amber); margin:4px 0 8px; }
  .about-ver{ font-size:10px; color:var(--ink-dim); font-weight:400; }
  .about-sub{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--contour); text-transform:uppercase; margin:12px 0 4px; }
  .about-desc{ font-size:11.5px; line-height:1.55; color:var(--ink-dim); }
  #about-panel .io-row{display:flex; gap:6px; margin-top:8px;}
  #about-panel .io-row button{
    flex:1; padding:8px; border:1px solid var(--panel-line); border-radius:6px; background:transparent;
    color:var(--ink); font-size:11.5px; cursor:pointer; font-family:var(--sans); font-weight:600;
  }
  #about-panel .io-row button:hover{ background:#1a2318; }

  #eventteam-panel{
    position:absolute; top:232px; right:16px; z-index:11;
    background:var(--panel); border:1px solid var(--panel-line); border-radius:8px;
    padding:14px; width:280px; box-shadow:0 8px 24px rgba(0,0,0,.5); display:none; max-height:60vh; overflow-y:auto;
  }
  .et-tabs{ display:flex; gap:6px; margin-bottom:12px; }
  .et-tab{
    flex:1; padding:8px 4px; border-radius:6px; border:1px solid var(--panel-line); background:transparent;
    color:var(--ink-dim); font-size:12px; font-weight:600; cursor:pointer; font-family:var(--sans);
  }
  .et-tab.active{ background:#1a2318; color:var(--ink); border-color:var(--amber); }
  .et-add-row{ display:flex; gap:6px; margin-bottom:10px; }
  .et-add-row input, .et-add-row select{
    flex:1; background:#0d130c; border:1px solid var(--panel-line); border-radius:6px;
    color:var(--ink); font-family:var(--sans); font-size:12.5px; padding:8px;
  }
  .et-add-row button{
    width:34px; border:none; border-radius:6px; background:var(--amber); color:#1a1305;
    font-weight:700; font-size:16px; cursor:pointer;
  }
  #event-add-btn{ width:100%; font-size:12.5px; }
  .et-item{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:8px 0; border-top:1px solid var(--panel-line); font-size:12.5px;
  }
  .et-item:first-of-type{ border-top:none; }
  .et-item .et-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .et-item .et-meta b{ color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .et-item .et-meta span{ font-family:var(--mono); font-size:10px; color:var(--ink-dim); }
  .et-item .et-actions{ display:flex; gap:4px; flex-shrink:0; }
  .et-item .et-actions button{
    background:transparent; border:1px solid var(--panel-line); border-radius:5px;
    padding:4px 6px; font-size:11px; cursor:pointer; color:var(--ink);
  }
  .et-status-pill{
    font-family:var(--mono); font-size:9.5px; padding:2px 6px; border-radius:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; cursor:pointer; border:none; white-space:nowrap;
  }
  .et-status-active, .et-status-sahada{ background:rgba(95,184,95,.18); color:#5fb85f; }
  .et-status-closed, .et-status-ulasilamiyor{ background:rgba(232,84,58,.18); color:var(--signal); }
  .et-status-dinlenmede{ background:rgba(217,154,31,.18); color:var(--amber); }
  .et-prio-tag{ font-family:var(--mono); font-size:9px; text-transform:uppercase; }
  .et-prio-dusuk{ color:var(--ink-dim); }
  .et-prio-orta{ color:var(--amber); }
  .et-prio-yuksek{ color:#ff8c3a; }
  .et-prio-kritik{ color:var(--signal); font-weight:700; }
  #eventteam-panel .empty{ font-size:12px; color:var(--ink-dim); padding:6px 0; }

  .mesh-panel{ margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--panel-line); }
  .mesh-status-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
  .mesh-status-row span{ font-size:11.5px; color:var(--ink); font-family:var(--mono); }
  .mesh-status-row.connected span{ color:#5fb85f; }
  #mesh-connect-btn{
    padding:6px 12px; border:none; border-radius:6px; background:var(--amber); color:#1a1305;
    font-size:11.5px; font-weight:700; cursor:pointer; font-family:var(--sans); flex-shrink:0;
  }
  #mesh-connect-btn.connected{ background:var(--panel-line); color:var(--ink); }
  .team-marker.live{ box-shadow:0 0 0 3px rgba(95,184,95,.35), 0 2px 6px rgba(0,0,0,.5); }
  .et-node-tag{ font-family:var(--mono); font-size:9px; color:var(--ink-dim); }

  .mesh-lora-label{ display:block; font-size:11px; color:var(--ink); margin:8px 0 4px; font-weight:500; }
  .mesh-lora-controls{ display:flex; gap:6px; }
  .mesh-lora-controls select{
    flex:1; background:#0d130c; border:1px solid var(--panel-line); border-radius:6px;
    color:var(--ink); font-family:var(--sans); font-size:11.5px; padding:7px 6px;
  }
  #mesh-lora-apply{
    padding:7px 12px; border:none; border-radius:6px; background:var(--signal); color:#fff;
    font-size:11.5px; font-weight:700; cursor:pointer; font-family:var(--sans); flex-shrink:0;
  }
  .mesh-lora-warn{ color:var(--amber); margin-top:6px; }

  #mesaj-list{ max-height:220px; overflow-y:auto; margin-bottom:10px; }
  .mesaj-item{
    max-width:82%; margin-bottom:8px; padding:7px 10px; border-radius:10px; font-size:12px; line-height:1.4;
  }
  .mesaj-item.out{ margin-left:auto; background:rgba(217,154,31,.18); border:1px solid var(--amber); border-bottom-right-radius:2px; }
  .mesaj-item.in{ margin-right:auto; background:#0d130c; border:1px solid var(--panel-line); border-bottom-left-radius:2px; }
  .mesaj-item .mesaj-meta{ display:block; font-family:var(--mono); font-size:9px; color:var(--ink-dim); margin-top:3px; }

  #eventteam-badge{
    position:absolute; top:150px; left:50%; transform:translateX(-50%); z-index:11;
    background:var(--panel); border:1px solid var(--amber); border-radius:8px;
    padding:8px 14px; font-family:var(--mono); font-size:12px; color:var(--ink);
    display:none; align-items:center; gap:10px; box-shadow:0 8px 24px rgba(0,0,0,.5); max-width:88vw;
  }
  #eventteam-badge button{ background:transparent; border:none; color:var(--ink-dim); cursor:pointer; font-size:14px; }
  .team-marker{
    width:26px; height:26px; border-radius:50%; background:#3b9dd9; border:2px solid #0a0f0a;
    box-shadow:0 2px 6px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:var(--mono); font-size:10px; font-weight:700;
  }

  .et-hint{ font-size:10.5px; color:var(--ink-dim); line-height:1.4; margin-bottom:8px; }
  .et-log-item{ padding:7px 0; border-top:1px solid var(--panel-line); font-size:12px; }
  .et-log-item:first-of-type{ border-top:none; }
  .et-log-item .et-log-ts{ font-family:var(--mono); font-size:9.5px; color:var(--ink-dim); display:block; margin-bottom:2px; }
  .et-log-item.et-log-sos{ background:rgba(232,84,58,.12); border-radius:5px; padding:7px 6px; border-top:none; }
  .et-log-item.et-log-sos .et-log-ts{ color:var(--signal); font-weight:700; }
  .et-log-del{ float:right; background:transparent; border:none; color:var(--ink-dim); cursor:pointer; font-size:11px; }

  #eventteam-panel .field{margin-bottom:10px;}
  #eventteam-panel .field label{display:block; font-size:11px; color:var(--ink); margin-bottom:4px; font-weight:500;}
  #eventteam-panel select, #eventteam-panel input[type=text], #eventteam-panel input[type=date], #eventteam-panel textarea{
    width:100%; background:#0d130c; border:1px solid var(--panel-line); border-radius:6px;
    color:var(--ink); font-family:var(--sans); font-size:12px; padding:7px 8px; resize:vertical;
  }
  #eventteam-panel .io-row{ display:flex; gap:6px; margin-top:6px; }
  #eventteam-panel .io-row button{
    flex:1; padding:8px; border:none; border-radius:6px; font-size:12px; cursor:pointer; font-family:var(--sans); font-weight:600;
  }
  #rapor-save-btn{ background:var(--panel-line); color:var(--ink); }
  #rapor-pdf-btn{ background:var(--amber); color:#1a1305; }
  #sos-btn{ color:var(--signal) !important; }
  #sos-btn:hover{ background:rgba(232,84,58,.15) !important; }

  #regions-panel .total{font-family:var(--mono); font-size:11px; color:var(--amber); margin-bottom:10px;}
  .region-item{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:8px 0; border-top:1px solid var(--panel-line); font-size:12px;
  }
  .region-item:first-of-type{border-top:none;}
  .region-item .meta{display:flex; flex-direction:column; gap:1px;}
  .region-item .meta b{font-weight:600; color:var(--ink);}
  .region-item .meta span{font-family:var(--mono); font-size:10.5px; color:var(--ink-dim);}
  .region-item button{
    background:transparent; border:1px solid var(--panel-line); color:var(--signal);
    border-radius:5px; padding:5px 8px; font-size:11px; cursor:pointer; flex-shrink:0;
  }
  .region-item button:hover{background:rgba(232,84,58,.12);}
  #regions-panel .empty{font-size:12px; color:var(--ink-dim); padding:6px 0;}
  #regions-panel .io-row{display:flex; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid var(--panel-line);}
  #regions-panel .io-row button{
    flex:1; padding:8px; border:1px solid var(--panel-line); border-radius:6px; background:transparent;
    color:var(--ink); font-size:11.5px; cursor:pointer; font-family:var(--sans); font-weight:600;
  }
  #regions-panel .io-row button:hover{background:#1a2318;}

  #topbar-search{
    position:absolute; top:96px; left:50%; transform:translateX(-50%); z-index:9;
    width:min(86vw, 340px); background:var(--panel); border:1px solid var(--panel-line); border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.5); padding:6px; display:flex; gap:6px; flex-wrap:wrap;
  }
  #topbar-input{
    flex:1; min-width:0; background:#0d130c; border:1px solid var(--panel-line); border-radius:6px;
    color:var(--ink); font-family:var(--sans); font-size:12px; padding:8px 10px;
  }
  #topbar-go{
    width:34px; flex-shrink:0; border:none; border-radius:6px; background:var(--amber); color:#1a1305;
    font-weight:700; font-size:14px; cursor:pointer;
  }
  #topbar-results{
    width:100%; order:3; max-height:40vh; overflow-y:auto;
  }
  #topbar-results .search-result{
    padding:8px 6px; border-top:1px solid var(--panel-line); font-size:12.5px; cursor:pointer; color:var(--ink);
  }
  #topbar-results .search-result:hover{background:#161f14;}
  #topbar-results .search-history-label{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--ink-dim); text-transform:uppercase; padding:6px 6px 2px; }
  #topbar-results .hint, #topbar-results .empty{ font-size:11px; color:var(--ink-dim); padding:6px 4px; line-height:1.5; }
  #topbar-results .err{ font-size:11px; color:var(--signal); padding:6px 4px; }
  #topbar-results .ok{ font-size:11px; color:var(--contour); padding:6px 4px; }

  #settings-panel .field{margin-bottom:12px;}
  #settings-panel .field label{display:block; font-size:11.5px; color:var(--ink); margin-bottom:5px; font-weight:500;}
  #settings-panel select, #settings-panel input[type=number]{
    width:100%; background:#0d130c; border:1px solid var(--panel-line); border-radius:6px;
    color:var(--ink); font-family:var(--mono); font-size:12px; padding:7px 8px;
  }
  #settings-panel input[type=color]{
    width:100%; height:32px; background:#0d130c; border:1px solid var(--panel-line); border-radius:6px;
    padding:2px; cursor:pointer;
  }
  #settings-panel .field-hint{ font-size:10px; color:var(--ink-dim); line-height:1.4; margin-top:4px; }
  #settings-panel .lang-row{display:flex; gap:6px;}
  #settings-panel .lang-row button{
    flex:1; padding:7px; border:1px solid var(--panel-line); border-radius:6px; background:transparent;
    color:var(--ink-dim); cursor:pointer; font-family:var(--sans); font-size:12px; font-weight:600;
  }
  #settings-panel .lang-row button.active{background:var(--amber); color:#1a1305; border-color:var(--amber);}
  #settings-save{
    width:100%; margin-top:6px; padding:9px; border:none; border-radius:6px;
    background:var(--amber); color:#1a1305; font-weight:700; font-size:12.5px; cursor:pointer;
  }

  #measure-badge, #slope-badge, #area-badge, #wind-badge{
    position:absolute; top:150px; left:50%; transform:translateX(-50%); z-index:11;
    background:var(--panel); border:1px solid var(--amber); border-radius:8px;
    padding:8px 14px; font-family:var(--mono); font-size:12px; color:var(--ink);
    display:none; align-items:center; gap:10px; box-shadow:0 8px 24px rgba(0,0,0,.5); max-width:88vw;
  }
  #measure-badge b, #slope-badge b, #area-badge b, #wind-badge b{color:var(--amber);}
  #measure-badge button, #slope-badge button, #area-badge button, #wind-badge button{background:transparent; border:none; color:var(--ink-dim); cursor:pointer; font-size:14px; margin-left:4px;}
  #wind-arrow{font-size:18px; color:var(--amber); display:inline-block; transition:transform .4s;}
  #area-finish{color:#5fb85f !important; font-weight:700;}

  #area-status-modal{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:21;
    background:var(--panel); border:1px solid var(--amber); border-radius:10px;
    padding:16px; width:240px; display:none; box-shadow:0 12px 32px rgba(0,0,0,.6);
  }
  #area-status-modal .label{font-family:var(--mono); font-size:10px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px;}
  .area-status-row{display:flex; gap:8px; margin-bottom:10px;}
  .area-status-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 4px;
    border-radius:8px; border:1px solid var(--panel-line); background:#0d130c; cursor:pointer;
    color:var(--ink); font-size:11px; font-family:var(--sans); font-weight:600; transition:.15s;
  }
  .area-status-btn .ic{font-size:20px;}
  .area-status-btn.scanned:hover, .area-status-btn.scanned.picked{border-color:#5fb85f; background:rgba(95,184,95,.12);}
  .area-status-btn.unscanned:hover, .area-status-btn.unscanned.picked{border-color:var(--signal); background:rgba(232,84,58,.12);}
  #area-note-input{
    width:100%; background:#0d130c; border:1px solid var(--panel-line); border-radius:6px;
    color:var(--ink); font-family:var(--sans); font-size:12px; padding:8px; margin-bottom:8px;
  }
  #area-status-cancel{
    width:100%; padding:8px; border:none; border-radius:6px; background:var(--panel-line);
    color:var(--ink); font-size:12px; cursor:pointer; font-family:var(--sans); font-weight:600;
  }

  #elevation-panel{
    position:absolute; top:205px; left:50%; transform:translateX(-50%); z-index:12;
    background:var(--panel); border:1px solid var(--amber); border-radius:8px;
    padding:12px; width:min(90vw, 320px); display:none; box-shadow:0 8px 24px rgba(0,0,0,.5);
  }
  #elevation-panel .label{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-dim); text-transform:uppercase; margin-bottom:6px;}
  #elevation-svg{ width:100%; height:110px; }
  #elevation-stats{ font-family:var(--mono); font-size:11px; color:var(--ink); margin-top:6px; }
  #elevation-close{
    width:100%; margin-top:8px; padding:7px; border:none; border-radius:6px;
    background:var(--panel-line); color:var(--ink); font-size:12px; cursor:pointer; font-family:var(--sans); font-weight:600;
  }
  .slope-chip{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px;}

  #note-modal{
    position:absolute; z-index:20; background:var(--panel); border:1px solid var(--amber);
    border-radius:8px; padding:12px; width:230px; box-shadow:0 8px 24px rgba(0,0,0,.5); display:none;
  }
  #note-modal .label{font-family:var(--mono); font-size:10px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;}
  #note-modal textarea{
    width:100%; height:56px; background:#0d130c; border:1px solid var(--panel-line); border-radius:5px;
    color:var(--ink); font-family:var(--sans); font-size:12.5px; padding:8px; resize:none; margin-top:8px;
  }
  #note-modal .row{display:flex; gap:6px; margin-top:8px;}
  #note-modal button{flex:1; padding:7px; border:none; border-radius:5px; font-size:12px; cursor:pointer; font-family:var(--sans); font-weight:600;}
  #note-save{background:var(--amber); color:#1a1305;}
  #note-cancel{background:var(--panel-line); color:var(--ink);}
  .cat-row{display:flex; flex-wrap:wrap; gap:5px;}
  .cat-btn{
    flex:1 1 40px; min-width:40px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px;
    border-radius:6px; border:1px solid var(--panel-line); background:#0d130c; cursor:pointer; transition:.15s;
  }
  .cat-btn span.ic{font-size:14px;}
  .cat-btn span.lb{font-size:8.5px; color:var(--ink-dim); font-family:var(--mono); text-align:center; line-height:1.1;}
  .cat-btn.active{border-color:var(--amber); background:#1a2318;}

  #cat-add-modal{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:22;
    background:var(--panel); border:1px solid var(--amber); border-radius:10px;
    padding:16px; width:230px; display:none; box-shadow:0 12px 32px rgba(0,0,0,.6);
  }
  #cat-add-modal .label{font-family:var(--mono); font-size:10px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px;}
  #cat-add-modal input[type=text]{
    width:100%; background:#0d130c; border:1px solid var(--panel-line); border-radius:5px;
    color:var(--ink); font-family:var(--sans); font-size:12.5px; padding:8px; margin-bottom:8px;
  }
  .cat-add-color-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
  .cat-add-color-row label{font-size:12px; color:var(--ink);}
  #cat-add-modal .row{display:flex; gap:6px;}
  #cat-add-modal button{flex:1; padding:7px; border:none; border-radius:5px; font-size:12px; cursor:pointer; font-family:var(--sans); font-weight:600;}
  #cat-add-save{background:var(--amber); color:#1a1305;}
  #cat-add-cancel{background:var(--panel-line); color:var(--ink);}

  #note-photo-btn{
    flex:0 0 auto !important; width:auto; padding:7px 14px !important; background:var(--panel-line); color:var(--ink);
  }
  #note-photo-btn.has-photo{ background:var(--contour); color:#0a0f0a; }

  #note-mesh-share-row{
    display:flex; align-items:center; gap:6px; margin-top:8px; font-size:11px; color:var(--ink-dim); cursor:pointer;
  }
  #note-mesh-share-row input{ accent-color:var(--amber); }
  #note-photo-preview{ margin-top:8px; display:none; position:relative; }
  #note-photo-preview img{ width:100%; border-radius:5px; display:block; max-height:110px; object-fit:cover; }
  #note-photo-remove{
    position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%;
    background:rgba(10,15,10,.85); color:var(--signal); border:none; font-size:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .popup-photo{ width:100%; max-width:180px; border-radius:5px; margin-top:6px; display:block; cursor:pointer; }
  #photo-lightbox{
    position:fixed; inset:0; z-index:50; background:rgba(5,8,5,.92); display:none;
    align-items:center; justify-content:center; padding:20px;
  }
  #photo-lightbox img{ max-width:100%; max-height:100%; border-radius:6px; }
  #photo-lightbox-close{
    position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
    background:var(--panel); border:1px solid var(--panel-line); color:var(--ink); font-size:16px; cursor:pointer;
  }

  .pin-marker{
    width:22px; height:22px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
    border:2px solid #0a0f0a; box-shadow:0 2px 6px rgba(0,0,0,.5);
    display:flex; align-items:center; justify-content:center; font-size:11px;
  }
  .pin-marker span{transform:rotate(45deg);}
  .slope-marker{
    width:16px; height:16px; border-radius:50%; border:2px solid #0a0f0a; box-shadow:0 2px 6px rgba(0,0,0,.5);
    display:flex; align-items:center; justify-content:center;
  }
  .cb-glyph{ font-size:9px; color:#0a0f0a; font-weight:900; line-height:1; }
  .maplibregl-popup-content{
    background:var(--panel)!important; color:var(--ink)!important; border:1px solid var(--panel-line);
    font-family:var(--sans); font-size:12.5px; border-radius:6px;
  }
  .maplibregl-popup-tip{border-top-color:var(--panel)!important; border-bottom-color:var(--panel)!important;}
  .popup-del{background:transparent; border:1px solid var(--panel-line); color:var(--signal); border-radius:4px; padding:3px 7px; font-size:11px; cursor:pointer; margin-top:6px;}
  .popup-cat{font-family:var(--mono); font-size:10px; color:var(--ink-dim); display:block; margin-bottom:3px; text-transform:uppercase; letter-spacing:.05em;}

  .maplibregl-ctrl-attrib{background:rgba(10,15,10,.75)!important; color:var(--ink-dim)!important;}
  .maplibregl-ctrl-attrib a{color:var(--contour)!important;}

  body.night-mode{ filter: grayscale(1) sepia(1) hue-rotate(-60deg) saturate(6) brightness(.55); }

  .maplibregl-ctrl-top-left{ margin-top:92px !important; margin-left:16px !important; }
  .maplibregl-ctrl-top-right{ margin-top:92px !important; margin-right:16px !important; }
  .maplibregl-ctrl-scale{
    background:var(--panel) !important; border-color:var(--panel-line) !important;
    color:var(--ink) !important; font-family:var(--mono) !important; font-size:10.5px !important;
  }

  #attribution-line{
    position:absolute; bottom:2px; left:0; right:0; z-index:6; text-align:center;
    font-family:var(--mono); font-size:8px; color:var(--ink-dim); opacity:.7; pointer-events:none;
  }
  #attribution-line a{ pointer-events:auto; color:var(--ink-dim); }

  #compass-widget{
    position:absolute; bottom:198px; left:16px; z-index:10;
    background:var(--panel); border:1px solid var(--panel-line); border-radius:10px;
    padding:10px; display:flex; flex-direction:column; align-items:center; gap:5px;
    font-family:var(--mono); font-size:11px; color:var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.4);
    cursor:pointer; opacity:.96; width:112px;
  }
  #compass-widget.live{ border-color:var(--amber); }
  #compass-svg{ width:92px; height:92px; }
  .cw-ring{ fill:#0d130c; stroke:#263326; stroke-width:2; }
  .cw-ring-inner{ fill:none; stroke:#1c2519; stroke-width:1; }
  .cw-pointer{ fill:#e8543a; }
  .cw-tick-cardinal{ stroke:#d99a1f; stroke-width:2.2; }
  .cw-tick-mid{ stroke:#7a8f5c; stroke-width:1.3; }
  .cw-tick-minor{ stroke:#3a4636; stroke-width:.7; }
  .cw-label{ fill:#e7e6da; font-size:11px; font-family:'JetBrains Mono', monospace; font-weight:700; }
  .cw-label-mid{ fill:#8fa08a; font-size:6px; font-family:'JetBrains Mono', monospace; font-weight:600; }
  .cw-deg{ fill:#5c6656; font-size:5px; font-family:'JetBrains Mono', monospace; }
  #compass-value{ font-weight:600; letter-spacing:.02em; text-align:center; line-height:1.3; }

  #undo-toast{
    position:absolute; bottom:340px; left:50%; transform:translateX(-50%); z-index:14;
    background:#171d15; border:1px solid var(--amber); border-radius:8px;
    padding:9px 10px 9px 14px; display:none; align-items:center; gap:12px;
    font-family:var(--sans); font-size:12.5px; color:var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.5);
    max-width:88vw;
  }
  #undo-toast-btn{
    background:var(--amber); color:#1a1305; border:none; border-radius:5px;
    padding:6px 10px; font-size:11.5px; font-weight:700; cursor:pointer; font-family:var(--sans); white-space:nowrap;
  }

  @keyframes cdh-spin{ to{ transform:rotate(360deg); } }
  .btn-spinner{
    display:inline-block; width:11px; height:11px; margin-right:6px; vertical-align:-1.5px;
    border:2px solid rgba(255,255,255,.35); border-top-color:#1a1305; border-radius:50%;
    animation:cdh-spin .7s linear infinite;
  }