:root{
  --max-width:700px;
  --gap:12px;
  --radius:10px;
}
*{box-sizing:border-box}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:20px;
  display:flex;
  justify-content:center;
  color:#111;
}
.container{
  width:100%;
  max-width:var(--max-width);
  padding:20px;
}
h1{margin:0 0 12px 0}
form{
  display:flex;
  gap:var(--gap);
  align-items:center;
  margin-bottom:12px;
}
input[type="text"]{
  flex:1;
  padding:10px;
  border-radius:var(--radius);
  border:1px solid #ccc;
  font-size:16px;
}
button{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #888;
  background:transparent;
  cursor:pointer;
  font-weight:600;
}
.message{
  min-height:1.25rem;
  margin:6px 0 12px 0;
  font-size:14px;
}
.list{list-style:none; padding:0; margin:0}
.list li{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  padding:10px;
  border-radius:8px;
  border:1px solid #e6e6e6;
  margin-bottom:8px;
  background:#fafafa;
}
.name-text{font-weight:700}
.timestamp{font-size:12px; opacity:0.7; margin-left:8px}
.btn-delete{
  background:transparent;
  border:1px solid #d33;
  padding:6px 8px;
  border-radius:6px;
  cursor:pointer;
  font-size:13px;
  color:#800;
}
.empty{color:#666; font-style:italic}
.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
@media (max-width:480px){
  form{flex-direction:column; align-items:stretch}
  button{width:100%}
}