body {
    margin: 0;
  }
  .leaflet-bottom {
      bottom: 1px;
  }
  #tree-map {
      height: 100vh;
      height: 100dvh;
  }
  #tree-info {
      position: absolute;
      top: 10px;
      left: 50px;
      z-index: 1000;
      background: white;
      padding: 6px 8px;
      border-radius: 3px;
      box-shadow: 0 1px 5px rgba(0,0,0,0.3);
      font-size: 12px;
  }

  #tree-count {
      display: inline;
  }

  #clear-query {
      display: none;
      margin-left: 6px;
      cursor: pointer;
      font-size: 16px;
      line-height: 12px;
  }
  .tree-marker div{
   background:#26734d;
   border:2px solid #ffffff;
   border-radius:50%;
   box-sizing:border-box;
 }
 .tree-marker.selected div{
   box-shadow:
     0 0 6px 3px rgba(255,255,255,0.9),
     0 0 14px 6px rgba(212,175,55,0.9);
 }
 .tree-marker.level1 div{
   width:22px;
   height:22px;
   position:relative;
}
.tree-marker.level1 div::before{
 content:"";
 position:absolute;
 left:-4px;
 top:-4px;
 width:26px;
 height:26px;
 border:2px solid #d4af37;
 border-radius:50%;
 box-sizing:border-box;
}
.tree-marker.level1 div::after{
content:"";
position:absolute;
left:-6px;
top:-6px;
width:30px;
height:30px;
border:2px solid #ffffff;   /* 白色内环 */
border-radius:50%;
box-sizing:border-box;
}
 .tree-marker.level2 div{
   width:22px;
   height:22px;
 }
 .tree-marker.type-icon div{
   background-image:var(--icon);
   background-position:center;
   background-size:contain;
   background-repeat:no-repeat;
 }
  .tree-detail-panel {
      height:auto;
    display:none;
    position:fixed;
    top:80px;
    right:20px;
    width:min(360px, calc(100vw - 40px));
    max-height:75vh;
    overflow:hidden;
    background:white;
    border-radius:6px;
    box-shadow:0 4px 20px rgba(0,0,0,.25);
    z-index:1000;
    overflow:hidden;
  }
  #tree-detail-content{
      max-height:75vh;
      margin-left:16px;
      margin-right:16px;
      padding-bottom:16px;
      box-sizing:border-box;
      overflow-y:auto;
      overscroll-behavior:contain;
  }
  #tree-detail-close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .tree-photo-scroll{
    display:flex;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    padding:0 0 8px 0;
    align-items:flex-start;
  }
  .tree-photo-item{
    position:relative;
    flex:0 0 90%;
    width:90%;
    margin:12px 0 0 0;
  }
  .tree-photo-item img{
    width:100%;
    max-width:none;
    height:auto;
    border-radius:6px;
    display:block;
  }
  .tree-photo-item figcaption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    box-sizing:border-box;
    padding:4px 8px;
    background:rgba(0,0,0,.5);
    color:white;
    font-size:13px;
    line-height:18px;
    text-align:left;
    border-radius:0 0 6px 6px;
  }
  .tree-photo-none{
    display:none;
    width:100%;
    height:120px;
    align-items:center;
    justify-content:center;
    background:#f5f5f5;
    color:#999;
    border:1px dashed #ccc;
    border-radius:4px;
    box-sizing:border-box;
    font-size:14px;
  }

  .tree-detail__grid {
    display: grid;
    grid-template-columns: 66px 1fr;
    gap: 0px 0px;
    row-gap: 0px;
    margin: 0;
  }
  .tree-detail__grid dt {
      color: #718077;
  }
  .tree-detail__grid dd {
      margin-left: 10px;
  }

  .tree-detail__note {
    margin: 4px 0 0;
    padding-top: 2px;
    border-top: 1px solid #e4e8e4;
    white-space: pre-wrap;
    font-size: 14px;
  }

  .tree-detail__meta {
    margin-top: 2px;
    color: #718077;
    font-size: 12px;
  }
  #tree-detail-culture,
  #tree-detail-growth {
      grid-column: 1 / -1;
      display: contents;
  }

  .map-actions {
    overflow: hidden;
    border: 1px solid #d7e0d9;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
    width:32px;
  }

  .map-actions button {
    display: flex;
    width: 32px;
    height: 44px;
    border: 0;
    border-bottom: 1px solid #e5ebe6;
    background: #fff;
    color: #28573c;
    cursor: pointer;
    font-size: 13px;
    align-items:center;
    justify-content:center;
  }

  .map-actions button:last-child {
    border-bottom: 0;
  }

  .map-actions button:hover,
  .map-actions button.is-active {
    background: #e7f1e9;
    color: #146337;
  }

  .map-actions__locate,
  .map-actions__upload {
    font-size: 22px !important;
  }
  .map-info-actions {
    overflow: hidden;
    transform: translateY(30px);
    border: 1px solid #d7e0d9;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
    width: 32px;
  }

  .map-info-actions button {
    display: flex;
    width: 32px;
    height: 44px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #e5ebe6;
    background: #fff;
    color: #28573c;
    cursor: pointer;
    font-size: 20px;
    align-items: center;
    justify-content: center;
  }

  .map-info-actions button:last-child {
    border-bottom: 0;
  }

  .map-info-actions button:hover {
    background: #e7f1e9;
    color: #146337;
  }
  .map-toast {
    position: fixed;
    z-index: 2000;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(calc(100vw - 32px), 460px);
    margin: 0;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgb(0 0 0 / 22%);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: opacity 3s ease, transform 0.4s ease;
  }
  .map-toast.is-hidden {
    opacity: 0;
    transform: translate(-50%, -45%);
    pointer-events: none;
  }
  .map-toast--success {
    background: #e5f4e9;
    color: #145c31;
  }
  .map-toast--pending {
    background: #fff4da;
    color: #78580d;
  }
  .vertical-text{
  writing-mode:vertical-rl;
  }
  #pendingBox{
      position:absolute;
      top:10px;
      right:10px;
      z-index:999;
      background:#fff;
      padding:8px 12px;
      border-radius:5px;
      box-shadow:0 1px 5px #999;
  }
  #pendingBox a{
      color:red;
      text-decoration:none;
      font-weight:bold;
  }
  .marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{
  border:1px solid #000;
  box-sizing:border-box;
  }
  #messageBox{
      position:fixed;
      top:20px;
      right:15px;
      color:white;
      padding:8px 8px;
      border-radius:5px;
      z-index:9999;
  }
  #messageBox a{
      color:white;
      text-decoration:none;
  }
  #messageCount{
      display:inline-flex;
      min-width:28px;
      height:28px;
      padding:0 0px;
      border-radius:14px;
      background:red;
      color:white;
      align-items:center;
      justify-content:center;
      font-size:16px;
      font-weight:bold;
  }
  .image-viewer {
      display:none;
      position:fixed;
      z-index:9999;
      left:0;
      top:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.85);
      justify-content:center;
      align-items:center;
  }
  .image-viewer img {
      max-width:95%;
      max-height:95%;
      object-fit:contain;
  }
  .close-image {
      position:absolute;
      right:20px;
      top:15px;
      color:white;
      font-size:40px;
      cursor:pointer;
  }
  .help-icon {
      position: absolute;
      left: 20px;
      bottom: 14px;
      width: 16px;
      height: 16px;
      border: 1px solid #555;
      border-radius: 50%;
      background: white;
      color: #555;
      font-size:16px;
      line-height: 16px;
      text-align: center;
      text-decoration: none;
      z-index: 1000;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  }
  .help-icon:hover {
      background: #f0f0f0;
      color: #000;
  }
  .possible-trees-link {
      position: absolute;
      left: 16px;
      bottom: 10px;
      z-index: 1000;
      color: #666;
      background: rgba(255,255,255,0.75);
      padding-left: 3px;
      padding-top: 3px;
      padding-right: 3px;
      padding-bottom: 3px;
      border-radius: 3px;
      font-size: 16px;
      text-decoration: none;
  }
  .possible-trees-link:hover {
      color: #333;
      background: rgba(255,255,255,0.9);
  }

  .tree-query-panel{
    display:none;
    position:fixed;
    top:80px;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:280px;
    max-width:calc(100vw - 40px);
    max-height:75vh;
    overflow-y:auto;
    padding:20px;
    box-sizing:border-box;
    background:#fff;
    border:1px solid #d7e0d9;
    border-radius:6px;
    box-shadow:0 4px 16px rgba(0,0,0,0.25);
    z-index:1000;
  }
  .tree-query-title{
    font-size:18px;
    font-weight:bold;
    margin-bottom:18px;
  }
  .tree-query-close{
    position:absolute;
    right:8px;
    top:5px;
    width:32px;
    height:32px;
    border:0;
    background:transparent;
    font-size:28px;
    line-height:28px;
    cursor:pointer;
  }
  .tree-query-group{
    margin-bottom:18px;
  }
  .tree-query-label{
    margin-bottom:8px;
    font-weight:bold;
  }
  .tree-query-group label{
    display:block;
    margin:8px 0;
    cursor:pointer;
  }
  .tree-query-group select{
    width:100%;
    height:34px;
    padding:4px 8px;
    box-sizing:border-box;
  }
  .tree-query-buttons{
    display:flex;
    gap:10px;
  }
  .tree-query-buttons button{
    flex:1;
    height:36px;
    border:1px solid #bbb;
    border-radius:4px;
    background:#f5f5f5;
    cursor:pointer;
  }
  #tree-query-submit{
    background:#4f7f5f;
    color:white;
    border-color:#4f7f5f;
  }

  .statistics-list-panel {
      display:none;
      position:fixed;
      top:80px;
      left:50%;
      transform:translateX(-50%);
      width:min(400px,calc(100vw - 40px));
      max-height:75vh;
      padding:8px;
      background:#f5f6f7;
      border-radius:8px;
      box-shadow:0 4px 20px rgba(0,0,0,.25);
      z-index:1000;
      overflow:hidden;
  }

  .statistics-list-header {
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 12px;
      background:#e6e9ec;
      border-radius:5px;
      font-weight:bold;
      font-size:16px;
  }

  .statistics-list-close {
      border:0;
      background:none;
      font-size:28px;
      line-height:28px;
      cursor:pointer;
      padding:0 4px;
  }

  .statistics-list-content {
      margin-top:8px;
      max-height:calc(75vh - 66px);
      overflow-y:auto;
      border-radius:5px;
  }

  .statistics-list-row {
      display:flex;
      justify-content:space-between;
      padding:8px 12px;
      background:#fff;
      border-bottom:1px solid #e8e8e8;
      color:#333;
      text-decoration:none;
      cursor:pointer;
  }

  .statistics-list-row:first-child {
      border-radius:5px 5px 0 0;
  }

  .statistics-list-row:last-child {
      border-bottom:0;
      border-radius:0 0 5px 5px;
  }

  .statistics-list-row:hover {
      background:#f7f9fa;
  }

  .statistics-list-name {
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
  }

  .statistics-list-count {
      margin-left:15px;
      flex-shrink:0;
      font-variant-numeric:tabular-nums;
  }

  #statistics-panel {
    display:none;
    position:fixed;
    top:80px;
    left:50%;
    transform:translateX(-50%);
    width:280px;
    max-height:75vh;
    padding:8px;
    background:#f5f6f7;
    border-radius:8px;
    box-shadow:0 4px 20px rgba(0,0,0,.25);
    z-index:1000;
    overflow:hidden;
  }