body { font-family:'Roboto',sans-serif; background:#1e1e2f; color:#f0f0f5; padding:20px; }
h1,h2 { margin-bottom:20px; }
.rule-box { background:#2a2a3d; padding:12px; border-radius:12px; display:flex; align-items:center; margin-bottom:12px; box-shadow:0 2px 5px rgba(0,0,0,0.3);}
.rule-input { flex:1; padding:8px 12px; border-radius:8px; border:1px solid #444; background:#1e1e2f; color:#f0f0f5; margin-right:8px; font-size:14px; }
.rule-btn { background:#5c5cff; color:#fff; border:none; border-radius:8px; padding:6px 12px; margin-left:4px; cursor:pointer; font-weight:bold; transition:0.2s; }
.rule-btn:hover { background:#4040ff; }
#newRuleText { width:400px; padding:10px; border-radius:10px; border:1px solid #444; background:#1e1e2f; color:#f0f0f5; margin-right:8px; font-size:14px; }
#addRuleBtn { background:#5c5cff; padding:10px 16px; border-radius:10px; border:none; cursor:pointer; color:#fff; font-weight:bold; transition:0.2s; }
#addRuleBtn:hover { background:#4040ff; }
@media(max-width:600px){ .rule-input,#newRuleText { width:100%; margin-bottom:6px; } .rule-box { flex-direction:column; align-items:flex-start; } }
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
}

.footer-right {
  position: absolute;
  right: 20px;
  bottom: 15px;
  color: #ff416c;
  text-decoration: none;
  font-weight: bold;
}

.footer-right:hover {
  text-decoration: underline;
}
/* Prevent text selection on buttons */
.rule-btn,
#addRuleBtn {
    user-select: none;
}

/* Optional: also prevent selection in input placeholders */
#newRuleText::placeholder {
    user-select: none;
}

/* Ensure clicks register on the whole button */
.rule-btn,
#addRuleBtn {
    user-select: none;          /* prevent text selection */
    cursor: pointer;            /* make pointer appear */
    display: inline-flex;       /* ensure text inside is part of the button click */
    align-items: center;
    justify-content: center;
}