/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  background: #0f0f10;
  color: #fff;

  /* voorkomt rare scaling op mobiel */
  -webkit-text-size-adjust: 100%;
}

/* SAFE AREA */
body {
  padding:
    env(safe-area-inset-top)
    12px
    env(safe-area-inset-bottom)
    12px;
}

/* CONTAINER */
.app {
  max-width: 640px;
  margin: 0 auto;
}

/* MODULES */
.module {
  margin-bottom: 16px;
  padding: 12px;
  background: #1a1a1c;
  border-radius: 12px;
}

/* TITLES */
.module h2 {
  font-size: 14px;
  margin: 0 0 8px 0;
  opacity: 0.7;
}

/* INPUTS (BASIS) */
textarea,
select,
input {
  width: 100%;
  font-size: 15px; /* iets kleiner en consistenter */
  padding: 10px;
  border-radius: 10px;
  border: none;
  outline: none;
  margin-bottom: 10px;
  background: #2a2a2d;
  color: #fff;
}

/* TEXTAREA SPECIFIEK */
textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;

  /* voorkomt "huge" gevoel */
  font-size: 14px;
}

/* OUTPUT / PREVIEW */
.output {
  margin-top: 10px;
  padding: 10px;
  background: #111;
  border-radius: 10px;
  font-size: 13px;
  white-space: pre-wrap;
  line-height: 1.4;

  /* voorkomt layout jumps */
  overflow-wrap: break-word;
}

/* BUTTON */
button {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  background: #2f6df6;
  color: white;
  cursor: pointer;
}

button:active {
  transform: scale(0.98);
}

/* BUTTON GROUP */
.button-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* IMAGE MODULE */
.module.image button {
  display: block;
  width: 100%;
  margin-top: 8px;
}

/* COPY BUTTON */
.copy-btn {
  background: #444;
}

/* STICKY */
.sticky {
  position: sticky;
  bottom: 0;
  background: #0f0f10;
  padding-top: 8px;
}

/* MOBILE */
@media (max-width: 480px) {
  .module {
    padding: 10px;
  }

  textarea {
    min-height: 110px;
    font-size: 14px;
  }
}