:root {
  --glowny: rgb(0, 121, 107); /* Ciemna turkusowa zieleń (#00796b) */
  --tlo: rgb(224, 242, 241); /* Bardzo jasny turkus (#e0f2f1) */
  --tekst: rgb(0 ,77 ,64); /* Ciemny zielony (#004d40) */

}

body {
  display: none; /* Aby nie było mrugnięcia treści zakupów podcza ładowania strony. */
  margin: 0;
  padding: 20px;
  background: var(--tlo);
  font-family: "Segoe UI", Tahoma, sans-serif;
}

h2 {
  margin-top: 0;
  color: var(--glowny);
}

#powrot {
  position: fixed;
  top: 15px;
  left: 15px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%; /* Okrągły kształt */
  background: var(--tekst);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  color: white;
  cursor: pointer;
  font-size: 30px;
  text-decoration: none;
  text-align: center;
  line-height: 34px; /* Aby idealnie wypośrodkować strzałkę ← w pionie. */
  transition: transform 0.2s;
}

#powrot:hover {
  transform: rotate(45deg);
}

#status {
  position: fixed;
  top: 15px;
  right: 15px;
  font-size: 0.85rem;
  color: rgb(136, 136, 136); /* Szary */
  transition: opacity 0.3s; 
}

#kontener {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px; 
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#edytor {
  display: block; /* Aby pomiędzy dolną krawędzią <textarea> a kontenerem nie pozostał wąski pasek. */
  width: 100%;
  height: 80vh;
  box-sizing: border-box;
  padding: 15px;
  border: 2px solid var(--glowny);
  border-radius: 10px; 
  font-family: inherit;
  font-size: 1.15rem;
  line-height: 1.5;
  resize: none;
  outline: none; /* Aby ramka nie była czarna. */
}