html {
    min-height: 100vh;
    /* background: linear-gradient(0deg, #FFF 7.69%, rgba(255, 255, 255, 0.00) 30.77%), url(<path-to-image>) lightgray 0% 0% / 100px 100px repeat; */
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 80%, var(--Passionate-Red, #ED1651) 95%);

}

body {
    min-height: 100vh;
    font-family: Poppins;
  /*font-family: system-ui, sans-serif; */

  padding: 0;
  margin: 0;
 /* background-color: #f9f9f9; */
  background-color: transparent;
  /* background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 80%, var(--Passionate-Red, #ED1651) 95%); */
  color: #222;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='518' height='534' viewBox='0 0 518 534' fill='none'%3E%3Cpath opacity='0.1' d='M787.514 343.349L681.991 237.736L470.841 26.509C453.746 9.39959 431.059 0 406.895 0C382.73 0 361.414 8.87152 344.32 25.3472L26.4861 343.349C9.3915 360.458 0 383.165 0 407.351C0 431.536 9.3915 454.243 26.4861 471.353L158.389 603.369C168.414 613.402 181.815 619 195.955 619C210.095 619 223.497 613.402 233.521 603.369L365.424 471.353C376.504 460.263 391.277 454.138 407 454.138C422.723 454.138 437.496 460.263 448.576 471.353L580.479 603.369C590.504 613.402 603.905 619 618.045 619C632.185 619 645.586 613.402 655.611 603.369L787.514 471.353C804.609 454.243 814 431.536 814 407.351V406.4C813.789 382.532 804.397 360.142 787.514 343.243V343.349ZM343.053 448.962L211.15 580.979C202.92 589.111 188.991 589.111 180.76 580.979L48.8569 448.962C37.777 437.873 31.6567 423.087 31.6567 407.351C31.6567 391.614 37.777 376.829 48.8569 365.739L366.479 47.9485C377.348 37.4927 391.805 31.684 407 31.684C422.195 31.684 437.39 37.8096 448.47 48.899L610.975 211.438C610.975 211.438 610.342 211.438 609.92 211.544C608.759 211.544 607.598 211.86 606.543 211.966C604.855 212.177 603.166 212.388 601.478 212.705C600.317 212.917 599.156 213.128 597.996 213.445C596.413 213.761 594.83 214.184 593.247 214.606C592.086 214.923 591.031 215.24 589.87 215.663C588.288 216.191 586.705 216.719 585.227 217.352C584.172 217.775 583.011 218.197 581.956 218.62C580.373 219.253 578.896 219.993 577.419 220.732C576.364 221.26 575.414 221.788 574.359 222.316C572.881 223.161 571.298 224.112 569.821 225.062C568.871 225.59 568.027 226.224 567.078 226.752C565.495 227.808 563.912 229.075 562.435 230.237C561.696 230.765 560.957 231.293 560.324 231.821C558.108 233.617 555.998 235.518 553.993 237.63L342.948 448.857L343.053 448.962ZM782.343 407.351C782.343 423.087 776.223 437.873 765.143 448.962L633.24 580.979C625.009 589.111 611.08 589.111 602.85 580.979L470.947 448.962C455.54 433.543 435.491 424.355 414.07 422.77L576.469 260.126C587.549 249.036 602.322 242.911 618.045 242.911C633.768 242.911 648.541 249.036 659.621 260.126L765.143 365.739C776.117 376.723 782.238 391.298 782.343 406.823V407.351Z' fill='%23ED1651'/%3E%3C/svg%3E");
  background-position: bottom right;
  background-repeat: no-repeat;
  background-attachment: fixed;
    
}


main {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 800px;
    padding: 0 20px;
    min-height: calc(100vh - 160px);
}


.logo {
    margin: 12px auto;
}

h1 {
color: #FFF;
text-align: center;

/* Poppins/Heading 1/Bold */
font-family: Poppins;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 57.6px; /* 120% */
}

.controls {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-top: 1rem;
  flex-wrap: wrap;
}

textarea {
  width: 100%;
  height: 200px;
  font-size: 1rem;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: vertical;
  margin-bottom: 1rem;
  box-sizing: border-box;
}

button {
  background-color: #0069d9;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 8px;
  transition: background-color 0.2s;
  
    display: flex;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: #ED1651;
}

button:hover {
  /*background-color: #0053b3;*/
  background-color: #c71747;
}

#result, #emojiResult {
  white-space: pre-wrap;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 16px;
  margin-top: 1.5rem;
  border-radius: 6px;
  min-height: 100px;
  font-size: 1rem;
}

#copyBtn {
  margin-top: 10px;
}

#copyStatus {
  font-size: 0.9rem;
  color: #2d862d;
  margin-left: 10px;
}

select {
  font-size: 1rem;
  padding: 8px 12px;
  border: 1px solid #ccc;
 /* border-radius: 5px; */
  background-color: #fff;
  color: #222;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  border-radius: 8px;
border: 1px solid var(--Light-Grey, #C2C2C2);
background: #FFF;
  appearance: none; /* Removes browser-specific arrow on most systems */
}

select:focus {
  outline: none;
  border-color: #0069d9;
  box-shadow: 0 0 0 2px rgba(0, 105, 217, 0.25);
}

select:hover {
  border-color: #888;
}

.results-wrap,
.emoji-results-wrap {
  background: #fff;
  border: 1px solid #ddd;
  padding: 1rem;
  margin-top: 1.5rem;
  border-radius: 8px;
}

.results-wrap pre,
.emoji-results-wrap pre {
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.btn-group {
  display: flex;
  gap: 0.5rem;
}

.main-footer {
    text-align: center;
    color: var(--Light-Black, #222);
    /* Poppins/Headline/Regular */
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 120% */
}

.dev-panel {
  font-family: monospace;
  font-size: 0.9rem;
  background: #f9f9f9;
  border: 1px solid #ccc;
  padding: 1rem;
  margin-top: 2rem;
  overflow-y: auto;
  max-height: 300px;
  display: none!important; /* toggle this for production */
}

.dev-panel pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 1rem;
}

#devLogs pre {
  background: #f9f9f9;
  padding: 10px;
  margin-bottom: 10px;
  border-left: 3px solid #ccc;
  white-space: pre-wrap;
}