*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Segoe UI',system-ui,sans-serif;
  background:#f0e6d3;
  min-height:100vh;
  color:#3a3a3a;
}

header{
  background:#fff8e1;
  padding:1.5rem 2rem;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  position:sticky;top:0;z-index:10;
}

h1{
  font-size:1.6rem;
  margin-bottom:1rem;
  color:#5d4037;
}

.input-bar{
  display:flex;
  gap:.75rem;
  align-items:flex-end;
}

#note-input{
  flex:1;
  padding:.6rem .8rem;
  font-size:.95rem;
  border:2px solid #d7ccc8;
  border-radius:8px;
  resize:vertical;
  font-family:inherit;
  background:#fffdf5;
  transition:border-color .2s;
}

#note-input:focus{
  outline:none;
  border-color:#ffab40;
}

#add-btn{
  padding:.6rem 1.4rem;
  font-size:.95rem;
  font-weight:600;
  border:none;
  border-radius:8px;
  background:#ffab40;
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s,transform .1s;
}

#add-btn:hover{background:#ff9100}
#add-btn:active{transform:scale(.96)}

#notes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.25rem;
  padding:2rem;
}

.note-card{
  background:#fff9c4;
  border-radius:6px;
  padding:1rem 1rem .75rem;
  box-shadow:2px 3px 10px rgba(0,0,0,.1);
  display:flex;
  flex-direction:column;
  gap:.5rem;
  position:relative;
  animation:pop-in .25s ease;
  word-break:break-word;
  white-space:pre-wrap;
  min-height:100px;
}

.note-card:nth-child(4n+2){background:#c8e6c9}
.note-card:nth-child(4n+3){background:#bbdefb}
.note-card:nth-child(4n+4){background:#f8bbd0}

.note-card .text{
  flex:1;
  font-size:.92rem;
  line-height:1.45;
}

.note-card .meta{
  font-size:.7rem;
  color:#999;
  text-align:right;
}

.note-card .del-btn{
  position:absolute;
  top:6px;right:8px;
  background:none;
  border:none;
  font-size:1.1rem;
  cursor:pointer;
  color:#c62828;
  opacity:.45;
  transition:opacity .15s;
  line-height:1;
}

.note-card .del-btn:hover{opacity:1}

@keyframes pop-in{
  from{opacity:0;transform:scale(.9)}
  to{opacity:1;transform:scale(1)}
}

@media(max-width:480px){
  header{padding:1rem}
  #notes-grid{padding:1rem;gap:1rem}
  .input-bar{flex-direction:column}
  #add-btn{width:100%}
}