body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    background: #f4f4f9; 
    padding: 20px; 
    color: #333; 
    margin: 0;
}

h2 { margin-top: 0; }

#mobile-toggle {
    display: none; /* Hidden on desktop */
    background: #555;
    margin-bottom: 10px;
}

.controls { 
    background: #fff; 
    padding: 15px 25px; 
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    margin-bottom: 20px; 
    display: flex; 
    gap: 20px; 
    align-items: flex-end; 
    flex-wrap: wrap; 
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.control-group label {
    font-size: 12px;
    font-weight: bold;
    color: #666;
}

select, input[type="date"], input[type="number"], button { 
    padding: 8px 12px; 
    font-size: 14px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
}

.checkbox-group {
    display: flex;
    gap: 10px;
    align-items: center;
    height: 35px;
}

.lat-lon-inputs {
    display: flex;
    gap: 5px;
}

.lat-lon-inputs input {
    width: 70px;
}

button { 
    background: #1f77b4; 
    color: white; 
    border: none; 
    font-weight: bold; 
    cursor: pointer; 
    transition: background 0.2s; 
    height: 36px;
}

button:hover { background: #155a8a; }
button:disabled { background: #999; cursor: not-allowed; }

#chart-container { 
    background: #fff; 
    padding: 10px; 
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    width: 100%; 
    height: 65vh; 
    min-height: 400px;
}

#status { font-weight: bold; color: #1f77b4; font-size: 14px; margin-left: auto; align-self: center;}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #mobile-toggle { display: block; width: 100%; }
    .controls { display: none; flex-direction: column; align-items: stretch; }
    .control-group { width: 100%; }
    .lat-lon-inputs input { width: 100%; }
    #status { margin-left: 0; text-align: center; margin-top: 10px;}
}