body {

  background-color: #f8f9fa;

  font-family: 'Segoe UI', sans-serif;

  padding: 10px;

}


.note-input-area {

  position: relative;

  z-index: 2;

}


/* Lined textarea */

textarea#noteInput {

  background-color: #fffef0;

  background-image: repeating-linear-gradient(

    to bottom,

    transparent,

    transparent 24px,

    #d3d3d3 25px

  );

  line-height: 25px;

  height: 175px;

  padding: 10px;

  border: 1px solid #ccc;

  font-size: 1rem;

  resize: none;

  overflow-y: auto;

}


/* Scrollable note history */

.note-history-wrapper {

  max-height: 300px;

  overflow-y: auto;

  border-top: 1px solid #ddd;

  padding-top: 10px;

}


/* Responsive tweaks */

@media (max-width: 768px) {

  .note-history-wrapper {

    max-height: 250px;

  }


  textarea,

  input[type="text"] {

    font-size: 0.95rem;

  }

}