*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:#f6f7fb;color:#222}
.topbar{position:sticky;top:0;z-index:5;display:flex;gap:12px;align-items:center;padding:12px;background:#3D7AFD;color:#fff}
.topbar h1{margin:0;font-size:20px}
.search{flex:1;border:none;border-radius:10px;padding:10px 12px;font-size:16px}
main{padding:12px;display:grid;gap:12px}
.folders{display:flex;flex-wrap:wrap;gap:10px}
.folder{background:#fff;border-radius:10px;padding:10px 12px;box-shadow:0 1px 4px rgba(0,0,0,.08);min-width:120px;cursor:pointer}
.folder h3{margin:4px 0 0 0;font-size:16px}
.list .item{background:#fff;border-radius:10px;padding:10px 12px;margin-bottom:8px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.item small{color:#666}
.add{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(5,1fr) auto;gap:8px;padding:10px;background:#eef1f6;border-top:1px solid #e0e4ec}
.add input{padding:10px;border:1px solid #d6dbe6;border-radius:8px}
.add button{background:#3D7AFD;color:#fff;border:none;border-radius:8px;padding:10px 14px;font-weight:600}

/* Toast Notification */
.toast {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 16px;
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s, bottom 0.3s, visibility 0.3s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-weight: 500;
}

.toast.show {
  visibility: visible;
  opacity: 1;
  bottom: 100px;
}

/* Update item to support delete button flexbox */
.list .item{display:flex; justify-content:space-between; align-items:flex-start; gap: 10px;}
.item-content {flex:1; display:flex; flex-direction:column; gap: 4px;}

/* Delete Button Styles */
.delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  opacity: 0.5;
  transition: opacity 0.2s, transform 0.2s;
  padding: 4px;
}

.delete-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Input Labels Styling */
.add {
  align-items: end; /* Align the button to the bottom of the input fields */
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-group label {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  padding-left: 4px;
}

.attachment-btn {
  display: inline-block;
  padding: 4px 8px;
  background-color: #f0f4ff;
  color: #3b82f6;
  text-decoration: none;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #dbeafe;
  transition: all 0.2s ease;
}

.attachment-btn:hover {
  background-color: #dbeafe;
}