.anagram-tool {
    max-width: 700px;
    margin: auto;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
    transition: all 0.3s ease;
}
.anagram-tool h2 {
    text-align: center;
    color: #333;
    margin-bottom: 15px;
    font-size: 1.8rem;
}
.anagram-tool input, .anagram-tool select, .anagram-tool button {
    width: calc(50% - 12px);
    padding: 10px;
    font-size: 1rem;
    border-radius: 5px;
    margin: 6px 6px;
    border: 1px solid #ccc;
    outline: none;
}
.anagram-tool button {
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.generate-btn { background: #28a745; color: white; }
.generate-btn:hover { background: #218838; }
.clear-btn { background: #dc3545; color: white; }
.clear-btn:hover { background: #c82333; }
.slider {
    width: 100%;
    height: 10px;
    -webkit-appearance: none;
    background: #ddd;
    outline: none;
    border-radius: 5px;
    margin-bottom: 10px;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #28a745;
    cursor: pointer;
    border-radius: 50%;
}
.results {
    margin-top: 20px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 5px;
    border: 1px solid #ddd;
    display: none;
}
.results ul {
    list-style: none;
    padding: 0;
}
.results li {
    padding: 6px;
    font-size: 1rem;
    border-bottom: 1px solid #eee;
}
.results li.valid {
    color: green;
    font-weight: bold;
}
.results li.invalid {
    color: red;
}
.loading {
    display: none;
    text-align: center;
    margin-top: 20px;
}
.loading.show { display: block; }
@media(max-width: 600px) {
    .anagram-tool input, .anagram-tool select, .anagram-tool button { width: 100%; }
}