body {
   font-family: sans-serif;
   margin: 0;
   padding: 1em;
   text-align: center;
   background-color: #fff;
   color: #000;
   transition: 0.3s;
 }

 #UserNameId {
   width: 80%;
   max-width: 400px;
   padding: 0.5em;
   font-size: 1em;
   border: 1px solid #ccc;
   border-radius: 5px;
   margin-bottom: 1em;
 }

 #SaveButtonId {
   cursor: pointer;
 }

 button {
   margin: 0.5em;
   padding: 0.6em 1.2em;
   font-size: 1em;
   border: none;
   background: #4285F4;
   color: white;
   border-radius: 5px;
 }

 #location {
   margin: 1em 0;
   font-size: 1.2em;
 }

 #map {
   height: 300px;
   margin: 1em auto;
   width: 100%;
   max-width: 600px;
   border-radius: 10px;
 }

 #history {
   margin-top: 1em;
   text-align: left;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
 }

 .dark-mode {
   background-color: #121212;
   color: white;
 }

 .dark-mode button {
   background: #333;
   color: white;
 }

 .dark-mode #map {
   filter: grayscale(80%) brightness(90%);
 }

 a.share-link {
   display: inline-block;
   margin: 0.5em;
   text-decoration: none;
   font-size: 1em;
   color: white;
   background-color: #25D366;
   padding: 0.6em 1.2em;
   border-radius: 5px;
 }

 .email-link {
   background-color: #D44638;
 }

 #tryAgainBtn {
   display: none;
   background-color: #f44336;
 }

 .success-message {
   color: #2e7d32;
   font-weight: bold;
   background: #c8e6c9;
   border-radius: 5px;
   padding: 0.2em 0.5em;
   box-shadow: 0 2px 8px rgba(46, 125, 50, 0.08);
   transition: background 0.3s, color 0.3s;
 }

 #error {
  color: red;
  margin-top: 5px;
  font-size: 14px;
}