:root {
    --bg: #0f172a;
    --card: #1e293b;
    --accent: #059669;
    --text: #f8fafc;
}

body { 
    margin: 0; background: var(--bg); color: var(--text); 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    height: 100vh; display: flex; flex-direction: column;
}

.app-header { 
    background: var(--card); 
    padding: 12px; 
    display: flex; 
    flex-direction: column; /* Hier passiert die Magie */
    gap: 10px; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3);
}

.brand { 
    font-weight: bold; 
    font-size: 1.1rem; 
    color: var(--accent); 
    text-align: center; /* Überschrift zentriert */
    width: 100%;
}

.controls { 
    display: flex; 
    gap: 8px; 
    width: 100%; /* Controls nehmen volle Breite ein */
}

select { 
    flex: 1; 
    min-width: 0; 
    padding: 10px; 
    background: var(--bg); 
    color: var(--text); 
    border: 1px solid var(--accent); 
    border-radius: 6px; 
    font-size: 16px;
}

.btn-add { 
    flex-shrink: 0; 
    padding: 0 20px; /* Breite des Buttons angepasst */
    background: var(--accent); 
    color: white; 
    border: none; 
    border-radius: 6px; 
    font-size: 20px; 
    font-weight: bold;
}


#graphContainer { flex: 1; width: 100%; overflow: hidden; }

/* Modal Design */
.modal-content { 
    position: fixed; bottom: 0; width: 100%; height: 60vh; 
    background: var(--card); border-top-left-radius: 16px; border-top-right-radius: 16px;
    padding: 20px; box-sizing: border-box; animation: slideUp 0.3s ease-out;
}

.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.close-btn { font-size: 30px; cursor: pointer; color: #64748b; }

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }