/* base-elements.css — Utility and form element styles for the entire app */

/* Horizontal rule: subtle, semi-transparent line */
hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 20px 0;
}

/* General link styles: blue, bold, underline on hover */
a {
  color: #66bfff;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  text-decoration: underline;
}

/* Tool list: removes default bullets and spacing */
ul#toolList {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Tool list items: glassy cards with padding and rounded corners */
ul#toolList li {
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 14px 20px;
  transition: background 0.2s;
}

/* Highlight tool list item on hover */
ul#toolList li:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Tool list links: blue, bold, and block for full click area */
ul#toolList a {
  color: #66bfff;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  display: block;
}
ul#toolList a:hover {
  text-decoration: underline;
}

/* Form and button styling for tools and tool creation panels */
.tool input[type="text"],
.createtool-inner input[type="text"],
.createtool-inner textarea {
  width: 100%;
  font-size: 16px;
  padding: 8px;
  border: none;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  color: white;
}

/* Button styling for tools and tool creation panels */
.tool button,
.createtool-inner button {
  font-size: 16px;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: white;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 10px;
  margin-right: 8px;
}

/* Button hover effect for tools and tool creation panels */
.tool button:hover,
.createtool-inner button:hover {
  background: rgba(255, 255, 255, 0.12);
}