html, body, #viewDiv {
        height: 100%;
        margin: 0;
      }

      .esri-legend {
        max-width: 220px;
      }

      #draftWatermark {
        position: fixed;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        font-family: Arial Black, Arial, sans-serif;
        font-size: 64px;
        font-weight: 900;
        letter-spacing: 6px;
        color: rgba(200, 0, 0, 0.18);
        pointer-events: none;
        user-select: none;
        z-index: 5000;
      }

      #Legend {
        position: fixed;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        pointer-events: none;
        user-select: none;
        z-index: 5000;
      }

      #Legend .legend-box {
        background: rgba(179, 177, 177, 0.9); /* light gray */
        padding: 4px 4px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      }

      /* #Legend img {
        max-width: 60vw;   
        max-height: 20vh;  
        width: auto;
        height: auto;
        display: block;
      } */



      #Legend img {
        max-width: 60vw;
        max-height: 20vh;
        width: auto;
        height: auto;
      }

      
      @media (min-width: 768px) {
        #Legend img {
          max-width: 300px;
          max-height: 140px;
        }
      }

      #loadingOverlay{
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.92);
        font-family: Arial, sans-serif;
      }
      .loadingBox{
        display:flex;
        align-items:center;
        gap:12px;
        padding:14px 16px;
        border-radius:12px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        background: #ffffff;
      }
      .spinner{
        width: 26px;
        height: 26px;
        border: 3px solid rgba(0,0,0,0.15);
        border-top-color: rgba(0,0,0,0.65);
        border-radius: 50%;
        animation: spin 0.9s linear infinite;
      }


      .esri-attribution {
        display: none !important;
      }

      @keyframes spin { to { transform: rotate(360deg); } }

      @media (max-width: 600px) {
        #draftWatermark {
          font-size: 42px;
        }
      }

    .toast {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10000;

    background: #323232;
    color: white;

    padding: 16px 24px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);

    font-family: Arial, sans-serif;
    font-size: 16px;

    transform: translate(-50%, -50%) scale(.9);
    opacity: 0;
    transition: all .3s ease;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.toast.warning {
    background: #f57c00;
}