.container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h2 { text-align: center; }
.tab-buttons-container { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 15px; border-bottom: 1px solid #ddd; padding-bottom: 10px;}

.tab-button { 
    flex-grow: 1; 
    text-align: center; 
    padding: 10px 15px; 
    cursor: pointer; 
    border: none; 
    background-color: red; /* CHANGED: Default "other case" tabs are red */ 
    color: white; /* Added for readability on red */
    font-size: 1em; 
    transition: color 0.2s, border-color 0.2s, background-color 0.2s; /* Added background-color to transition */
}

/* ADDED: Hover state is green */
.tab-button:hover {
    background-color: green;
    color: white; 
}

/* CHANGED: Active tab is blue */
.tab-button.active { 
    color: #ffffff; 
    border-bottom-color: #3498db; /* Kept original blue border accent */
    font-weight: bold; 
    background-color: blue; 
}

.tab-content {

  padding: 10px;
  border-radius: 4px;
}

.generation-controls, .controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0; align-items: center; justify-content: center; }
.generation-controls input[type="number"] { width: 70px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.generation-controls button, .controls button { padding: 8px 15px; border: none; border-radius: 4px; color: white; cursor: pointer; transition: background-color 0.2s; }
.generation-controls button { background-color: blue; } .generation-controls button:hover { background-color: red; }
.controls button { background-color: blue; } .controls button:hover { background-color: green; }
ul { list-style-type: none; padding: 0; }
li { display: flex; flex-wrap: wrap; align-items: center; padding: 12px; border-bottom: 1px solid #eee; gap: 10px; font-size: 1.1em; }
li:last-child { border-bottom: none; }
li span { padding: 5px 8px; border-radius: 4px; }
li span.clickable { cursor: pointer; background-color: #ecf0f1; transition: background-color 0.2s; }
li span.clickable:hover { background-color: #d5dbdb; }
.audio-icon { display: inline-block; margin-right: 5px; font-size: 0.8em; opacity: 0.6; transition: opacity 0.2s; user-select: none; }
li span.clickable:hover .audio-icon { opacity: 1; }
@media (max-width: 600px) {
    body { padding: 5px; } .container { padding: 10px; }
    .tab-buttons-container, .generation-controls, .controls { flex-direction: column; align-items: stretch; text-align: center; }
    li { flex-direction: column; align-items: flex-start; gap: 5px; }
}