body {margin:0;font-family:"Segoe UI",Arial,sans-serif;background:#1a1a1a;color:white;}
header {padding:20px;background:#0078d7;color:white;text-align:center;}
header h1 {margin:0;font-size:28px;}
header p {margin-top:5px;font-size:14px;color:#d0e7ff;}
#addPoolForm {margin-top:15px;display:flex;justify-content:center;gap:10px;}
#addPoolForm input {padding:6px 10px;border-radius:3px;border:none;width:300px;}
#addPoolForm button {padding:6px 12px;border:none;border-radius:3px;background:#ffb900;cursor:pointer;color:black;font-weight:bold;}
#addPoolForm button:hover {background:#ffc733;}
main {padding:20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.tile {position:relative;background:#2b2b2b;border:2px solid #0078d7;border-radius:4px;padding:15px;display:flex;flex-direction:column;justify-content:space-between;transition:all 0.2s ease;word-wrap:break-word;overflow-wrap:break-word;min-height:240px;}
.tile:hover {background:#0078d7;color:white;}
.tile h2 {margin:0 0 10px 0;font-size:18px;word-break:break-word;}
.tile p {margin:4px 0;font-size:14px;color:#d0e7ff;word-break:break-word;}
.tile a {margin-top:10px;text-decoration:none;background:white;color:#0078d7;padding:6px 12px;border-radius:3px;text-align:center;}
.tile a:hover {background:#e5e5e5;}
.deleteBtn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.0); /* transparent by default */
  color: rgba(255, 255, 255, 0.6);      /* slightly visible text */
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}
.deleteBtn:hover {background:#ff4c4c;}